Depends on which version of the ionic-app-scripts you have installed, and which command you’re using to build your app. With ionic-app-scripts 0.0.47 you need to pass a --prod flag, says the changelog.
5.6M sounds like a lot, I doubt it’s actually using the prod settings. Like, www/build/main.js for the tabs starter project is 4.3M for a dev build, and 1.1M for prod build. And you shouldn’t need to manually minify it, the build should do that for you. What command are you using to build exactly?
Hey! So this sounds like a dev build to me. Since your on the latest version of app-scripts as was mentioned in this thread, you will need to run ionic build --prod to get a production build. This will aot compile and minify your project. With that command you should end up with a bundle somewhere between 1MB - 2MB. Now, the key thing here is that is not our ideal size yet. We are currently working hard on making the source code of Ionic completely tree-shakeable, along with looking at closure compiler for the smallest possible builds. This means that when you build your app only the ionic code that is needed for the bits of Ionic you use will be in your bundle, which should greatly decrease the overall size. A little farther in the future we plan on also integrating code splitting which will help even more with load times and bundle size. With code splitting the browser will only have to download the code for the first route on first page load, and then each additional route will be lazy loaded. Hope all this helps!
Here’s the result of my ionic build --prod; exactly the same as what gets put in the www/build folder if I use ionic serve. The app is going to be browser-only initially so I generally don’t use the build command.
PS. Thanks for the advice about moment.js, it’s quite a bit larger than I expected. However, the app performs in very time-sensitive way and uses moment objects extensively, so even at 200kb I’m reluctant to let it go.
After reading this post, went back and checked the build, I see there is a main.js.map also present part of prod build, in my case its size is more than the main.js file, And do we need this .map file for production build ? if not it can we reduce another 2M or so.
I am running with 0.0.47 app-scripts and RC3
Thanks for the info. Out of curiosity, would it be possible for you to zip up your project and shoot it to me in an email (email@example.com) ? Id love to take a look at whats going on with the build process here. Also, 40 to 50 pages is a’lot for a mobile application. If you look at the big mobile apps out there, twitter, facebook, youtube etc, or some of the popular PWA’s out there (https://flipkart.com, https://www.cnet.com/tech-today/#1) you will see that they only have a few views. Are each one of your pages displaying different data? Also, are there some that have the same or similar structure but simply display different data? If so, i would recommend taking a look at if you can make pages that do not have data hardcoded into them and instead one page that you simply display different data in (using angular data binding) depending on where the user navigated to it from.
we have a similar issue here, even though we use ionic build browser --prod or ionic build browser --release, ionic is always building in dev and emitting the following info:
[23:48:33] ionic-app-scripts 1.0.0
[23:48:33] build dev started …
[23:48:33] clean started …
[23:48:33] clean finished in 5 ms
[23:48:33] copy started …
[23:48:33] transpile started …
[23:48:37] transpile finished in 3.95 s
[23:48:37] webpack started …
[23:48:37] copy finished in 4.12 s
[23:48:48] webpack finished in 10.82 s
[23:48:48] sass started …
[23:48:49] sass finished in 645 ms
[23:48:49] build dev finished in 15.46 s
Running command: /workspace/lemoland/mobile/platforms/browser/cordova/build
Obviously, ionic seems ignoring the --release or --prod flags and always defaults to dev build.
This is very strange, if only for JS files. Are you sure you did proper cleaning and no unused imports in app.controller.ts & app.module.ts ? Also for plugins? If yes, try to create a new blank project from start, and copy paste your code in it, to check if it’s a compiler issue. By the way how big is your project folder? (mine is around 200 Mb with 9 pages, one provider - Ionic 2 stable).
Well then except lodash.js, I don’t see in your dependencies something to spare at first site. Good to note that this source-map is only the size uncompressed, when you run build with --prod these are compressed too.
The screenshot only contains node_modules, how big is your code?
And do you include a lot of fonts?
If that could help, here a post I opened about app bundle size, maybe it could give you some ideas (I hope so):
Hmm, this is an interesting issue. First, can you all update to the latest
cli? Here is a blog post that shows how to update http://blog.ionic.io/announcing-ionic-cli-v3/. Second, we do not recommend
using the cordova browser platform. It was built by the cordova team
originally as an experiment and was mainly meant to be used by cordova
plugin authors to mock out cordova api’s in the browser to make plugin
development quicker. After updating to the latest cli could you try running ionic cordova build --prod and then see what the size of the main.js
Since I started this topic I’d like to post an update, since it has been a while.
After updating from Ionic 2 to 3, the main.js file shrunk to around 2mb, which is small enough that it can be tolerated.