Angular 2アプリケーションをビルドし、webpackでバンドルします。 現在のところ、私のアプリケーションはまだ小さいですが、webpackタスクにはすでに約10秒かかります。 Webpackの設定やTypeSriptのコンパイルオプションを最適化して、コンパイルとパッケージングの時間を改善できますか?webpackで角度2のアプリケーション構築時間を最適化する
これは私が使用しての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を実施してスピードアップしている、私が個人的にやった
[コモンズ・チャンク・プラグイン](https://webpack.js.org/plugins/commons-chunk-plugin/)も役立つかもしれません。 [angle2-webpack-brief-starter](https://github.com/dominik791/angular2-webpack-brief-starter/blob/master/webpack.dev.js)の設定をチェックして、具体的な使い方を確認してくださいすべてのベンダーファイル(角度を含む)に対して – dominik791