Optymalizacja czasu budowania aplikacji Angular 2 za pomocą pakietu internetowego

Question

Buduję aplikację Angular 2 i pakuję ją w pakiet internetowy. W tej chwili moja aplikacja jest wciąż mała, ale zadanie Webpack zajmuje już około 10 sekund. Czy można zoptymalizować moją konfigurację Webpack lub opcje kompilacji TypeSript, aby poprawić czas kompilacji i pakowania?

To config WebPack używam:

var webpack = require('webpack'); 
var LiveReloadPlugin = require('webpack-livereload-plugin'); 

module.exports = { 
    entry: __dirname + '/assets/app/app.ts', 
    output: { 
    filename: 'myApp.bundle.js', 
    path: __dirname + '/build/' 
    }, 
    // Turn on sourcemaps 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['.ts', '.js'] 
    }, 
    plugins: [ 
    new LiveReloadPlugin({ 
     appendScriptTag: true 
    }), 
    // Fixes angular 2 warning 
    new webpack.ContextReplacementPlugin(
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     __dirname 
    ) 
    ], 
    module: { 
    rules: [{ 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: "source-map-loader" 
     }, 
     { 
     enforce: 'pre', 
     test: /\.tsx?$/, 
     use: "ts-loader" 
     } 
    ] 
    } 
} 

A tsconfig:

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "pretty": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "noUnusedLocals": false, 
    "removeComments": true, 
    "skipLibCheck": true, 
    "strictNullChecks": false, 
    "baseUrl": "./src", 
    "typeRoots": ["node_modules/@types"], 
    "types": [ 
     "core-js", 
     "systemjs" 
    ], 
    "outDir": "./build" 
    }, 
    "exclude": [ 
    "node_modules" 
    ] 
} 

UPDATE(zobacz moją odpowiedź dla stałej webpack.config)

Podpowiadam wtyczkę webpack DLL sugerowaną przez @jpwiddy, kompilując kątowo w oddzielnym budynku d, aby móc przebudować tylko kod aplikacji podczas rozwoju i zyskać sporo czasu na kompilację.

Jednak po sprawdzeniu wyjściowego JS rozmiar pliku jest taki sam i wewnątrz nadal znajduje się kod kątowy.

Oto nowy plik WebPack config źródeł kątowych:

var webpack = require('webpack'); 

module.exports = { 
    entry: { 
     angular:[ 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/core', 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/http', 
     '@angular/router', 
     '@angular/forms'   
    ] 
    }, 
    output: { 
    filename: 'ng2.dll.js', 
    path: __dirname + '/build/', 
    library: 'ng2' 
    }, 
    plugins: [ 
    // Fixes angular 2 warning 
    new webpack.ContextReplacementPlugin(
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     __dirname 
    ), 
    new webpack.DllPlugin({ 
     name: 'ng2', 
     path: __dirname + '/build/ng2.json' 
    }) 
    ] 
} 

I aktualizowany config WebPack składania aplikacji:

var webpack = require('webpack'); 
var LiveReloadPlugin = require('webpack-livereload-plugin'); 

module.exports = { 
    entry: __dirname + '/assets/app/app.ts', 
    output: { 
    filename: 'myApp.bundle.js', 
    path: __dirname + '/build/' 
    }, 
    // Turn on sourcemaps 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['.ts', '.js'] 
    }, 
    plugins: [ 
    new LiveReloadPlugin({ 
     appendScriptTag: true 
    }), 
    // Fixes angular 2 warning 
    new webpack.ContextReplacementPlugin(
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     __dirname 
    ), 
    new webpack.DllReferencePlugin({ 
     context: __dirname + '/build/', 
     manifest: require(__dirname + '/build/ng2.json') 
    }) 
    ], 
    module: { 
    rules: [{ 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: "source-map-loader" 
     }, 
     { 
     enforce: 'pre', 
     test: /\.tsx?$/, 
     use: "ts-loader" 
     } 
    ] 
    } 
} 

Oto jeden z kątowym kod znalazłem w mojej aplikacji JS wyjście:

_TsEmitterVisitor.prototype.visitBuiltintType = function (type, ctx) { 
    var typeStr; 
    switch (type.name) { 
     case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Bool: 
      typeStr = 'boolean'; 
      break; 
     case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Dynamic: 
      typeStr = 'any'; 
      break; 
     case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Function: 
      typeStr = 'Function'; 
      break; 
     case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Number: 
      typeStr = 'number'; 
      break; 
     case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Int: 
      typeStr = 'number'; 
      break; 
     case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].String: 
      typeStr = 'string'; 
      break; 
     default: 
      throw new Error("Unsupported builtin type " + type.name); 
    } 
    ctx.print(typeStr); 
    return null; 
}; 

Czy coś mi brakowało w nowej konfiguracji, aby zapobiec ebpack zawierający źródła kątowe na wyjściu?

Dziękuję

Answer 1

udało mi się naprawić mój config z nowym modułem webpack-dll-bundles-plugin (który używa DllPlugin i DllReferencePlugin w tle) robi dokładnie to, czego szukałem: izolowanie kompilacji Angular 2 w swoim pakiecie i unikaj odbudowywania całego pakietu za każdym razem, gdy chcę przebudować swój kod aplikacji (np. Z watcher).

Mój czas odbudowy spadł z 10 do 1 sekundy.

Oto mój nowy WebPack config:

var webpack = require('webpack'); 
var LiveReloadPlugin = require('webpack-livereload-plugin'); 
const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin; 

module.exports = { 
    entry: __dirname + '/assets/app/app.ts', 
    output: { 
    filename: 'myApp.bundle.js', 
    path: __dirname + '/build/' 
    }, 
    // Turn on sourcemaps 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['.ts', '.js'] 
    }, 
    plugins: [ 
    new LiveReloadPlugin({ 
     appendScriptTag: true 
    }), 
    // Fixes angular 2 warning 
    new webpack.ContextReplacementPlugin(
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     __dirname 
    ), 
    new DllBundlesPlugin({ 
     bundles: { 
      vendor: [ 
      '@angular/platform-browser', 
      '@angular/platform-browser-dynamic', 
      '@angular/core', 
      '@angular/common', 
      '@angular/forms', 
      '@angular/http', 
      '@angular/router', 
      'rxjs', 
      ] 
     }, 
     dllDir: __dirname + '/build/', 
     webpackConfig: {} 
     }) 
    ], 
    module: { 
    rules: [{ 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: "source-map-loader" 
     }, 
     { 
     enforce: 'pre', 
     test: /\.tsx?$/, 
     use: "ts-loader" 
     } 
    ] 
    } 
} 

Answer 2

Jeden świetny sposób, ja osobiście zrobić, że przyspieszyło proces budowania WebPACK realizuje DLL w swoim kompilacji.

Pakiet Webpack analizuje kod pod kątem require s oraz import s, a następnie tworzy tabelę na podstawie tych instrukcji wszystkich zależności modułów i łączy do miejsca, w którym można znaleźć te pliki.

Wtyczka DLL poprawia się w ten sposób, ponieważ podczas rejestrowania zależności za pomocą biblioteki DLL, za każdym razem, gdy zmieniają się te zależności (powinny być bardzo rzadkie), należy zbudować bibliotekę DLL (składającą się z pakietu javascript i pliku manifestu JSON) i owija wszystkie te zależności w pojedynczą paczkę. Pakiet ten jest następnie przywoływany podczas wciągania tych zależności do aplikacji.

Szybki przykład:

entry: { 
    angular:[ 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/core', 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/http', 
     '@angular/router', 
     '@angular/forms'   
    ], 
    bs: [ 
     'bootstrap', 
     'ng-bootstrap' 
    ] 
}, 

output: { 
    filename: '[name].dll.js', 
    path: outputPath, 
    library: '[name]', 
}, 

plugins: [ 
    new webpack.DllPlugin({ 
     name: '[name]', 
     path: join(outputPath, '[name].json') 
    }) 
] 

...a następnie określanej jako tak -

{ 
    plugins: [ 
     new webpack.DllReferencePlugin({ 
      context: process.cwd(), 
      manifest: require(join(outputPath, 'angular.json')) 
     }), 
     new webpack.DllReferencePlugin({ 
      context: process.cwd(), 
      manifest: require(join(outputPath, 'bs.json')) 
     }), 
    ] 
}