Anything I can do about a 6mb built JS?

Hi. I’m working on an Ionic 2 progressive web app. My main.js is a plump 6.0mb (before gzip compression), which seems large to me considering my entire pages folder is 1.5mb.

What are some things I can check to improve the file size?
Does using a lot of imports have any impact on the overall file size?

I tried running minify on it but it only reduced to 5.9mb…

I’ve heard AoT compiling is supposed to be a big help, but isn’t it on by default? Is there any setting for that anywhere or how can I check to make sure it’s working?

PS. the only npm module I’ve added since starting the project is moment.js.

3 Likes

The main.js contains EVERYTHING, Angular, Ionic, the templates, and your code as well. That is why this file is large.

Hope this helps

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.

1 Like

Thanks for the tip! I was using ionic app scripts 0.0.45, upgraded to 0.0.47, then the built JS was reduced to 5.6mb, but then was able to minify it to 2mb.

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!

Also, if you dont really really need moment.js then I would recommend removing it. moment adds about 200KB of javascript, which from my testing tends to add about a second on load time.

Thanks for your response!

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.

Hmm that’s interesting, thanks for confirming it’s a prod build! Out of curiosity how many components do you have in your app?

15 custom components.
Not so many ionic components in use although I’m using tabs/navigation/modals extensively.

There’s also 4 very large singletons that just hold and manage data for the page templates.

The biggest chunk of my code is the number of pages, probably 40-50 if all popups are included.

it seems like using ionic build --prod doesn’t minify. In the screenshot I posted you can see there are still webpack comments…

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 (justin@ionic.io) ? 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.

Hey I’m having a similar problem to what lloydv was having. My teammates on the same project have main.js ~245kb, but mine is 4.9mb.

This is my package.json

    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "ionic-angular": "2.0.1",
    "ionic-native": "2.4.1",

I’ve zipped up my project folder if you want to take a look.

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).

Have you try to have a look to your map to see if you’ve got a dependy which consume a lot of space?

I mean what would be the graph result of:

ionic serve
cd www/build
source-map-explorer main.js main.js.map

My project folder is 304MB and node_modules is 283MB.

Here’s is a screenshot of the source map explorer output


It looks like we are importing all ionic components, even ones that we don’t use. How can we import only the components we do use? Like angular material allows

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MdButtonModule, MdCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

In my app.module.ts, is this where I’m importing all the components?
IonicModule.forRoot(MyApp)

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):

1 Like

Hello,

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
file is?

Justin Willis
Support Engineer
Ionic

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.

2 Likes