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 e.g. 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?

score 0 · Answer 1 · answered May 03 '16 at 19:05

0

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.

answered May 03 '16 at 19:05

E. Allison

88
4

I can use systemjs, what I'm not sure is if I hace to bundle all the js from my app (components and services), will that affect something, becouse the files and the bundle will be in different locations (it can break the module imports)? – Diego Unanue May 03 '16 at 19:21
In short, no it will not break your imports. If you are using SystemJS as your module loader it will know where all of your module imports for your components and services are because it is the one actually calling them. Then when it bundles/builds/minifys your code and the libraries you are using, it will worry about how they are all connected so you don't have to. – E. Allison May 03 '16 at 19:25
What I want is one file to the css files and one for the my components js files (I mean concatenated and minified). Can I do this with RequireJs? – Diego Unanue May 03 '16 at 19:56
For this I would suggest a css linter/minifier to build the css seperately. I believe the SystemJS builder just handles javascript. – E. Allison May 03 '16 at 20:18

Steely · Answer 2 · 2016-06-17T20:39:33.660

0

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.

edited Jun 17 '16 at 20:39

answered Jun 17 '16 at 20:10

Steely

720
6
13

score 0 · Answer 3 · edited May 23 '17 at 10:31

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.

Angular 2 Bundling and Minification

3 Answers3