Angular 2 Bundling and Minification

Question

I watch a lot of tutorials of angular 2, and I couldn't some questions:

• 1- Should I use webpack for minification and bundleling?
• 2- Should I minify and bundle the js of the components itselfs.
• 3- Should I minify and bundle the js services that the components expose eg personService.js is used in person.ts?
• 4- What happens with the path of the service I provide inside the component, now it will be in one file located in another place? Should I change the path of the service called in the component depending on if I'm in development o production?

Answer 1

How are you currently handling module loading for your applications? I'm not as familiar with webpack, but SystemJS offers a builder/bundler that will do all of this for you then all you need to include in your html is the script for your bundled/built file.

Answer 2

I haven't used Webpack but SystemJS worked well for me. Gulp can be used to build, minify, and bundle all your code using a system.config.js to worry about the file locations of your source and dependencies.

Here is an example of Tour of Heroes where all the Typescript source is bundled into one JS file.

Answer 3

Angular CLI now makes all of this really easy, supporting bundling and minification (using WebPack underneath, but without any need to set it up), and Ahead-of-Time template compilation, which massively reduced the bundle size.

See: Angular 2: Reduce app size (in addition to bundling/minification)

It also sets up development and production environments, which you can import into components if you have different settings in dev vs. prod, and you can make your own custom environments and use those too.