The final bundle size of my web app after npm run ionic:build --prod is near 9 MB.
It makes the app to slow to download. How could I reduze the size of my final bundle?
Here are definitely a few routes you should take:
Uninstall all packages not listed in package.json.
npm prune
You can also add the --production flag to remove your devDependencies before production (which is a good idea since you are producing your project.
Use code and image minifying tools:
Minifier
Tiny Png
Manually Find and Remove unused image files and code snippets using plain 'ol Ctrl+Shift+F or Cmd+Shift+F.
Ideally, you should never repeat code and delete unused files. Ionic packages are large, and there is often no way around trimming them without getting rid of important dependencies. Hope this helps.
Reference:
How to reduce Ionic app size!
Related
I've recently come across a way of importing font awesome icons which would allow the creation of a final bundle with only the icons in use FontAwesome documentation. I understand that the bundler (Vite in my case) applies tree shaking in order to create a smaller bundle.
I'm currently in the midst of developing an app that also uses flags. Thus I stumbled upon the following repository Flag Icons. I've installed the npm package and added the stylesheet to index.html. Everything works as expected.
Does using the library this way mean I imported all the flags in my project, even the ones I won't use? Is there a way I can create a smaller bundle with the ones I'm going to use?
I'd like to know one thing.
Let's assume I add the npm package in the package.json file and don't use it anywhere in the code. In this case do the unnecessary dependencies affect the bundle js size?
Webpack dont read or use package.json at all. So obvios answer is "No".
I am using ASP.Net Core, Angular2 and Typescript and connected all together with webpack using the tutorial from Angular2 team here. That all seems to work but now I need to build each time I change a file.
Original tutorial uses system.js and that loads tons of files of course, but I just use static file middleware and no build is required for development. That is very convinient, but I cannot figure out how to do the same with webpack. It seems that webpack can only bundle everything together without an option to just load everything separately so I need to run the build each time.
Is it possible to do something so that webpack "expands" the bundle in some easy way?
P.S. I would like not to use webpack dev server and some auto-build on save and so on since the complexity is rather high alredy. So ideal solution is that I have bundles for production but direct code loaded for development like in good old days with standard mvc bundling.
Really, the best way would be to use webpack dev server. There's really not much setup involved, it's just a different command you run instead of webpack:
npm install webpack-dev-server
webpack-dev-server webpack.config.js
Then you just point script sources to http://localhost:8080/webpack-dev-server/your-bundle-name.js" in your application` tags.
This is by far the best option as you get instant incremental recompile and live-reload.
While I would strongly encourage you to use webpack-dev-server you can also just use plain webpack in watch mode:
webpack ---watch
There is no way to "expand the bundle" (and really no need to). In all likelyhood you are using webapack for more than just bundling, so you'd still require to re-build if you change a typescript file, for example. Webpack dev server or webpack in watch mode do very quick incremental compiles, and most people will just leave them running while developing.
So I am using the Aurelia skeleton-navigation starter as recommended. However, when I run the gulp bundle task the application will no longer load the main UI, it get's stuck on the spinner/loading page. I found this issue but even after installing the jspm beta it still doesn't seem to be resolved. Anyone had any luck? For what it is worth, I do not even see an aurelia.js bundle being created in the /dist directory so the 404 certainly makes sense in that respect.
So I have a fix, I am not thrilled with it though. It seems if you run bundle then run gulp watch to start the webserver, that the bundled files get wiped out from the dist folder. Running gulp watch in one command window and gulp bundle in another results in it working correctly as the bundled js is there at that point. I hope for a better fix from someone, this seems kind of hacky.
I have a directory of assets - favicon, sitemap.xml, etc - which are not referenced by my application, but which should be collected during my webpack build. This is trivial to do with other build tools like Grunt or Gulp, but I'm absolutely stumped on how to get Webpack to do this.
One way to sort of solve this is to use copy-loader. Keep in mind that Webpack is primarily a module bundler so this use case goes beyond it. It's more than fine to use Webpack with some other tools that are better suited for copying files.