Hi,
I have an Aurelia project that still uses the old CLI + requirejs. I understand that Aurelia has some restrictions on minification, as the bindings are all name/property based.
Nevertheless this generates a very readable code. And in my project I have a lot of classes that doesn’t use Aurelia at all.
Is it possible to have 2 separate bundles, one with the Aurelia/bindable classes and one with “pure” typescript classes and apply a stronger minification in the later?
If not, would another solution be to create a separate (npm? typescript?) package with the non-Aurelia code and reference it in my application. But, does this implies in compiling the project twice, (the non-Aurelia + the Aurelia) during development time?
Thanks in advance for your thoughts,
I would suggest separate the code into 2 projects.
One is pure logic without Aurelia, assuming that’s your business logic, which you can simplify the setup because it’s a plain js project, you can use rollup or something else to bundle and minify it.
The 2nd one is your front-end project, put the first one in your package.json dependencies, if it’s private repo, you can use git repo shortcuts in deps. Like:
"my-base-logic": "username/repo-name", // By default GitHub repo, by default master/main branch head
"my-base-logic": "gitlab:username/repo-name",
"my-base-logic": "bitbucket:username/repo-name#v1.0.0" // you can use tag/branch/commit-hash to lock down the dep code
"my-base-logic": "https://my-company-server/repo-name.git"
But if you update code of my-base-logic very often, it’s is bit troublesome. If you base-logic rarely changes, this can speed up your development because front-end takes less time to build (as base-logic is prebuilt).
Hi @huochunpeng,
Thanks for the answer. I see this is my second option (a separate package). I’ll probably use the Github username/repo repository. Also it won’t be a plain vanilla javascript package, but a typescript one.
In that sense, it will need to be transpiled everytime that I change it, but at this point in time, the code is quite stable.
What hardcore minification would you suggest, to make it really tiny small and unreadable?
The popular one is terser. You probably want to use rollup to bundle your ts project, there are ts and terser plugins for rollup.
Check terser document, there are some option you can turn on. Beware terser says the extra compression would not push down the size too much. GitHub - terser/terser: 🗜 JavaScript parser, mangler and compressor toolkit for ES6+