In my sample Angular 2 SPA , I have used Webpack 2 in order to
- Bundle all my js files
- Implement "Tree Shaking" to remove dead code and reduce bundle js file size
- and to implement Ahead-of-time compilation to reduce the bundle js file size further.
I was able to achive "1" and "2" by creating a webpack.config.js file , and below are the contents of this file
'use strict'; const webpack = require('webpack'); module.exports = { devtool: 'source-map', entry: './src/main.js', plugins: [ new webpack.optimize.UglifyJsPlugin({ minimize: true, compress: false }) ], output: { filename:'./src/bundle.js' } } "webpack.optimize.UglifyJsPlugin" plugin which does the Tree Shaking and minfication , reduced my bundle.js file size from 3 mb to 1 mb.
Next in order to implement AoT compilation , I have used @ngtools/webpack , and below is the modified webpack.config.js file with AoT related code.
'use strict'; const webpack = require('webpack'); const AotPlugin = require('@ngtools/webpack').AotPlugin; module.exports = { devtool: 'source-map', entry: './src/main.js', module: { rules: [ { test: /\.ts$/, loader: '@ngtools/webpack' } ] }, plugins: [ new webpack.optimize.UglifyJsPlugin({ minimize: true, compress: false }), new AotPlugin({ tsConfigPath: 'src\\tsconfig.json', mainPath: 'main.ts', "skipCodeGeneration": true }), ], output: { filename:'./src/bundle.js' } } After AoT the size of bundle.js file is still same(1 mb).
Now my question is how can I check/know whether AoT compilation is working or not ?
3 Answers
Answers 1
After AOT compilation, treeshaking should remove @anuglar/coompiler (which is respectively used during JIT. and if u doo simple size analysis you will learn that almost 40% of Angular 2 is Compiler so sazie
Answers 2
You can use source-map-explorer to view the content of your main.bundle.js and you can compare the AOT bundle with the non-AOT bundle. Hope it helps.
Answers 3
The best way to make sure that your Angular project is built using AOT is to get your hands dirty and take a look into the compiled source code.
What does AOT really do behind the scenes ? AOT is compiling your HTML into JS functions which can be statically analysed (and later tree shaked).
So just take a part of your HTML template and look for it inside your compiled JS. For example, here's my login.component.html in one of my projects :
<md-card> <form [formGroup]="loginForm" (ngSubmit)="onSubmit(loginForm)" fxLayout="column"> <md-input-container class="margin-top-x1"> <span mdPrefix> <md-icon color="primary">person</md-icon> </span> <input mdInput type="text" placeholder="Username" formControlName="username" required> </md-input-container> <md-input-container class="margin-top-x1"> <span mdPrefix> <md-icon color="primary">vpn_key</md-icon> </span> <input mdInput type="password" placeholder="Password" formControlName="password" required> </md-input-container> <div fxLayout="row" fxFlex="100%" fxLayoutAlign="start center" class="form-error" *ngIf="users.connectionFailed"> <md-icon color="warn">error</md-icon> <p>Username and password do not match</p> </div> <button md-raised-button color="primary" class="margin-top-x1" [disabled]="loginForm.invalid || users.isConnecting || users.isConnected"> <span *ngIf="!users.isConnecting && !users.isConnected"> Log in </span> <span *ngIf="users.isConnecting || users.isConnected" fxLayout="row" fxLayoutAlign="center center"> Logging in <md-spinner></md-spinner> </span> </button> </form> </md-card> Grab something easy to search, that will probably have few occurrences. For example here, the md-icon vpn_key. When I search in dist folder once built with AOT, I can find that my view has been compiled to :
And how would it be without AOT ?
Like that :
We can see that the whole template hasn't been compiled into JS without AOT !
Potential problem with your build system
When you say :
1) Bundle all my js files
2) Implement "Tree Shaking" to remove dead code and reduce bundle js file size
3) and to implement Ahead-of-time compilation to reduce the bundle js file size further.
If you bundle and implement Tree Shaking before the AOT compilation it won't work of course.
OFF TOPIC :
Bundle size seems to mater for you and if you're not already using Angular v4 I'd advise you to give a try. Few/no breaking changes yet (4.0.0-rc.2 as I'm writing) and the template compiler has been rewritten. It now generate less code for the views (~40 to ~50% less than Angular v2.x)
0 comments:
Post a Comment