Menu
We are in the process of re-writing our ng1 project with ng2. Our ng1 project, when built, is about 8mb. We are about a quarter of the way in our re-write to ng2 and we are already at 14mb for our ng2 prod build.
The major difference in the size of the dist folder can be attributed to differing sizes of source maps. Both projects include source maps but ng2 source maps are much larger. This makes sense to me as ng2 has more boilerplate, components are separated out, and so on.
Initially this question was placed on hold as it was too large to answer. I agree. But that's precisely why I am asking it. I'm trying to make sense of all the things ng2 offers that will make the final ng2 product better than the ng1 version.
With that, what are some of the practical approaches/procedures/tools that we can apply to our ng2 development practices to keep final sizes small and in turn user experience fast?
672
Angular is a very opinionated and robust framework. As a result, Angular apps generally have bigger bundle sizes when compared to apps written using other JavaScript frameworks like React. The Angular framework comes with a lot of useful libraries already included within it, such as RxJs and Zone.
Angular requires a bit more heavy lifting and overhead learning to get started, borrowing concepts and ideologies from Java, a predominantly backend technology that dominates Google's code infrastructure. Facebook, however, is PHP based and as a result, injects a good measure of component framework from the language.
Files used in Angular 7 App folder src folder: This is the folder which contains the main code files related to your angular application. app folder: The app folder contains the files, you have created for app components. app. component. css: This file contains the cascading style sheets code for your app component.
Inside the src folder, the app folder contains your project's logic and data. Angular components, templates, and styles go here.
I was trying out angular 2 the other day and I faced the same issue as you do, my vendor.js was 6M and this was a simple "Hello World" app...
I've found the following post that helped a lot in understanding how we should act on this issue (for now): http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
He uses several optimizing and compression techniques (precompile,treeshake, minify, bundle and gzip) on his 1.5M app to reduce its size to just 50kb.
Check it out, hope it helps! :)
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
