Webpack ile açısal 2 uygulama oluşturma süresini optimize edin

Question

Angular 2 uygulamasını yapıyorum ve web paketi ile paketliyorum. Şu anda, uygulamam hala küçük ancak webpack görevi zaten 10 saniye sürüyor. Derleme ve paketleme süresini geliştirmek için webpack yapılandırmamı veya TypeSript derleme seçeneklerimi optimize etmek mümkün mü?

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

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

GÜNCELLEME(sabit webpack.config benim cevaba bakınız)

Bu

webpack kullandığım yapılandırma olduğunu Ben ayrı bir boğa içinde açısal derleme tarafından jpwiddy tarafından önerilen DLL webpack eklentisi denemek d, gelişmeler sırasında sadece uygulama kodunu yeniden oluşturmak ve derleme için önemli zaman kazanabilmek için. Bununla birlikte, JS çıkışının incelenmesinden sonra, dosya boyutu oldukça aynıdır ve içinde hala açısal kod bulunmaktadır. İşte

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

benim uygulamada JS bulunan açısal kod biridir:

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

Ve uygulama için güncellenmiş webpack yapılandırma: Burada

açısal kaynakları için yeni webpack yapılandırma dosyasıdır çıkışı:

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

mü ben w önlemek için yeni config şey kaçırmış çıktıdaki açısal kaynakları içeren ebpack?

size WebPack süreç Yapınızda içinde dll uyguluyor inşa hızlandı şahsen yaptığım

Answer 1

Ben yepyeni modül webpack-dll-bundles-plugin ile benim yapılandırma düzeltmek başardı aradığım tam olarak ne yaptığını (DllPlugin ve DllReferencePlugin kullandığı arka planda): ait yapı izole Kendi paketinde açısal 2 ve uygulama kodumu yeniden oluşturmak istediğimde tüm paketimi yeniden oluşturmamaya çalışın (örneğin bir gözlemci ile).

Yeniden oluşturma sürem 10 sn'den 1 sn'ye düştü.

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

Tek mükemmel bir yol ederiz.

Webpack, require s kodunu ve import s kodunuzu analiz ederek çalışır ve daha sonra, tüm modül bağımlılıklarınızın bu ifadelerinden ve bu dosyaların bulunabileceği yerlere ait bağlantılardan bir tablo oluşturur.

DLL eklentisi, bağımlılıkları bir DLL ile kaydettirdiğinizde, bu bağımlılıklar her değiştiğinde (çok seyrek olmalıdır), bir DLL (bir javascript paketi ve bir JSON bildirim dosyasından oluşur) oluşturduğunuzda bunu geliştirir. ve tüm bu bağımlılıkları tek bir pakette sarar. Daha sonra bu bağımlılıklar uygulama içine çekilirken bu paket referans alınır.

Hızlı bir örnek:

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

...ve daha sonra şekilde başvurulan -

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