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 ?
