Workout plan to lose kilobytes

Minification - Webpack + UglifyJsPlugin

            
                new webpack.optimize.UglifyJsPlugin({
                    beautify: false,
                    output: { comments: false },
                    compress: {
                        unused: true,
                        dead_code: true
                    }
                })
            
		

            
                function square(x) { return x * x };
                function cube(x) { return x * x * x};
                let x = 5;
                if (x % 2 === 0) {
                    console.log(square(x)); 
                } else {
                    console.log(cube(x));
                }
            
		

                
                    console.log(125);
                
            

Don't believe? Try it yourself :)

Webpack - what does it do?

            
                // webpack.config.js
                const path = require('path');

                module.exports =  = {
                    entry: './src/main.ts',
                    output: {
                        path: path.resolve(__dirname, 'dist'),
                        filename: 'app.js'
                    }
                };
            
        

            
                module.exports = {
                    entry: {
                        app: './src/main.ts',
                        vendor: './src/vendor.ts'
                    },
                    plugins: {
                        new webpack.optimize.CommonsChunkPlugin({
                            name: ['app', 'vendor']
                        }),
                    }
                };
            
        

            
                module.exports = {
                    entry: {
                        app: './src/main.ts'
                    },
                    plugins: {
                        new webpack.optimize.CommonsChunkPlugin({
                            name: 'vendor',
                            chunks: ['app'],
                            minChunks: module => /node_modules/.test(module.resource)
                        }),
                    }
                };
            
        

Bundling

            
                // maths.js
                export function square(x) { return x * x; }
                export function cube(x) { return x * x * x; }
                
                // main.js
                import { cube } from './maths.js';
                console.log(cube(5)); // 125
            
		

            
                /***/ (function(module, exports, __webpack_require__) {
                    "use strict";
                    exports.__esModule = true;
                    exports.square = square;
                    exports.cube = cube;
                    function square(x) {
                        return x * x;
                    }
                    function cube(x) {
                        return x * x * x;
                    }
                /***/ }),
            
		

Tree Shaking - Webpack

            
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        [ 'es2015', { modules: false } ] // default CommonJS
                    ]
                }
            
		

            
                /***/ (function(module, __webpack_exports__, __webpack_require__) {
                    "use strict";
                    /* unused harmony export square */
                    /* harmony export (immutable) */ __webpack_exports__["a"] = cube;
                    function square(x) {
                        return x * x;
                    }
                    function cube(x) {
                        return x * x * x;
                    }
                /***/ }),
            
        

Bundle + Minification = Tree Shaking

            
                function(module, __webpack_exports__, __webpack_require__) {
                    "use strict";
                    function cube(x) {
                        return x * x * x;
                    }
                    __webpack_exports__.a = cube;
                }
            
        

            
                <h1>Hello World!</h1>
            
        

            
                // Compiles into
                ...
                const parentRenderNode:any = this.renderer.createViewRoot(this.parentElement);
                this._el_0 = import3.createRenderElement(this.renderer,parentRenderNode,'h1',import3.EMPTY_INLINE_ARRAY,(null as any));
                this._text_1 = this.renderer.createText(this._el_0,'Hello World!',(null as any));
                this._text_2 = this.renderer.createText(parentRenderNode,'\n',(null as any));
                ...
            
        

@ngtools/webpack

                
                    let AotPlugin = require('@ngtools/webpack').AotPlugin;

                    module.exports = {
                        rules: [{ test: /\.ts/, use: '@ngtools/webpack' }]
                        plugins: [
                            new AotPlugin({
                                tsConfigPath: path.resolve('tsconfig.json'),
                                entryModule: path.resolve('app.module#AppModule')
                            })
                        ]
                    }
                
            

Lazy loading

            
                const routes: Routes = [
                    { path: '', component: Component },
                    {
                        path: 'lazy',
                        loadChildren: './+lazy/lazy.module#LazyModule'
                    }
                ];
            
		

Lazy loading - preloading strategy

            
                import {
                    RouterModule, PreloadAllModules
                } from '@angular/router';
                ...
                imports: [
                    RouterModule.forRoot(routes, {
                        preloadingStrategy: PreloadAllModules 
                    })
                ],
            
        

compression-webpack-plugin

            
                new CompressionPlugin({
                    regExp: /\.css$|\.html$|\.js$$/,
                    threshold: 2 * 1024
                })
            
		

            
                AddOutputFilterByType DEFLATE text/javascript
                AddOutputFilterByType DEFLATE text/css
                AddOutputFilterByType DEFLATE text/html