webpackで角度2のアプリケーション構築時間を最適化する

Question

Angular 2アプリケーションをビルドし、webpackでバンドルします。 現在のところ、私のアプリケーションはまだ小さいですが、webpackタスクにはすでに約10秒かかります。 Webpackの設定やTypeSriptのコンパイルオプションを最適化して、コンパイルとパッケージングの時間を改善できますか？

これは私が使用してのWebPACKの設定です：

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" 
     } 
    ] 
    } 
} 

との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（固定webpack.configための私の答えを参照）

私は別のビルドで角をコンパイルすることによって@jpwiddyによって提案されたDLL webpackプラグインを試してみる開発中にアプリケーションコードのみを再構築し、コンパイルにかなりの時間を費やす必要があります。

しかし、出力JSの検査後、ファイルサイズは全く同じであり、内部にはまだ角度コードがあります。ここで

は角源のための新しいWebPACKの設定ファイルである：

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' 
    }) 
    ] 
} 

とアプリケーションの更新されたのWebPACKの設定：ここでは

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" 
     } 
    ] 
    } 
} 

は、私は自分のアプリケーションJSで見つかった角度コードの一つであります出力：

_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; 
}; 

wを防止するために新しい設定が欠けていましたか？出力に角源を含むebpack？

はあなたにWebPACKのビルドプロセスをビルド内のDLLを実施してスピードアップしている、私が個人的にやった

Answer 1

私はブランドの新しいモジュールwebpack-dll-bundles-pluginと私の設定を修正するために管理私が探していたかを正確にやって（DllPluginとDllReferencePluginを使用してバックグラウンドで）：のビルドを分離自分のバンドルの角2を使用し、アプリケーションコードを再構築するたびにバンドル全体を再構築しないようにします（ウォッチャーなど）。

再構築時間が10秒から1秒に短縮されました。ここで

が私の新しいのWebPACKの設定です：

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

一つの偉大な方法をありがとうございました。

Webpackはrequireとimportのコードを分析して動作し、すべてのモジュール依存関係のこれらのステートメントとそれらのファイルが見つかる場所へのリンクからテーブルを作成します。

依存関係をDLLに登録するとき、その依存関係が変更されるたびに（非常に少ない）、DLL（javascriptバンドルとJSONマニフェストファイルで構成される）をビルドするときにDLLプラグインが改善されます。これらの依存関係をすべて1つのパッケージにまとめます。そのパッケージは、それらの依存関係をアプリに取り込む際に参照されます。

簡単な例：

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') 
    }) 
] 

...その後、ように参照 -

{ 
    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')) 
     }), 
    ] 
}