5

I am working on Angular 5 project with the angular cli. I have used some npm modules in the development of the website. When i create the production build it is generating vendor.js with the size in the MBs, because of that the site is loading very slow when user opens it for the first time.

I have tried adding some extra arguments while making build ng build --prod --aot --buildOptimizerbut still it's size is pretty large compare to other files.

Is there any way in webpack I can split the vendor.js in multiple files or reduce the file or lazy load the vendor.js files?

hardiksa
  • 1,477
  • 1
  • 14
  • 19

1 Answers1

6

Yes. In webpack 4 you can do it using splitChunks configuration and SplitChunksPlugin, while on lower versions you can use AggressiveSplittingPlugin. Though these changes by itself doesn't help much, as the total size stays the same.

It's better to lazy-load some libraries. To do that you can dynamic import libraries (or modules/files that are using them) instead of import statements, but as this is an async action it would require rewriting code logic. As you are using angular it might be easier to use framework-specific lazy-loading

Another note: if library is used from multiple modules and one is loading it dynamically while another using import statement, it would end up in vendor bundle anyway, so you want to make sure all imports to these libraries are dynamic.

CodeMonkey
  • 3,271
  • 25
  • 50
eldarg
  • 308
  • 2
  • 7