Tối ưu hóa thời gian xây dựng ứng dụng Angular 2 với webpack

Question

Tôi xây dựng ứng dụng Angular 2 và gói nó với webpack. Hiện tại, ứng dụng của tôi vẫn còn nhỏ nhưng tác vụ webpack đã mất khoảng 10 giây. Có thể tối ưu hóa cấu hình webpack của tôi hoặc các tùy chọn biên dịch TypeSript để cải thiện thời gian biên dịch và đóng gói không?

Đây là cấu hình webpack tôi sử dụng:

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

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

CẬP NHẬT(xem câu trả lời của tôi cho webpack.config cố định)

Tôi cung cấp cho một thử plugin plugin webpack DLL được đề xuất bởi @ jpwiddy bằng cách biên dịch góc trong một buil riêng biệt d, để chỉ phải xây dựng lại mã ứng dụng trong quá trình phát triển và đạt được thời gian biên dịch đáng kể.

Tuy nhiên, sau khi kiểm tra JS đầu ra, kích thước tệp là hoàn toàn giống nhau và vẫn còn mã góc bên trong.

Đây là mới tập webpack cấu hình cho các nguồn góc:

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

Và cấu hình webpack cập nhật cho ứng dụng:

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

Đây là một trong những mã góc tôi tìm thấy trong ứng dụng của tôi JS đầu ra:

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

Tôi đã bỏ lỡ điều gì đó trong cấu hình mới để ngăn chặn w ebpack bao gồm các nguồn góc trong đầu ra?

Cảm ơn bạn

Answer 1

tôi quản lý để sửa cấu hình của tôi với thương hiệu mới mô-đun webpack-dll-bundles-plugin (trong đó sử dụng DllPlugin và DllReferencePlugin ở chế độ nền) làm chính xác những gì tôi đang tìm kiếm: cách ly vóc dáng người Góc 2 trong gói của riêng mình và tránh xây dựng lại toàn bộ gói của tôi mỗi khi tôi muốn xây dựng lại mã ứng dụng của mình (ví dụ: với người quan sát).

Thời gian xây dựng lại của tôi giảm từ 10 giây xuống còn 1 giây.

Đây là mới webpack cấu hình của tôi:

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

Một cách tuyệt vời Cá nhân tôi đã làm điều đó đã đẩy nhanh tiến độ xây dựng Webpack quá trình đang triển khai DLL trong xây dựng của bạn.

Webpack hoạt động bằng cách phân tích mã của bạn cho require s và import s, sau đó tạo bảng từ các câu lệnh này của tất cả các phụ thuộc mô-đun của bạn và liên kết đến nơi các tệp đó có thể được tìm thấy.

Plugin DLL cải thiện về điều này, khi bạn đăng ký phụ thuộc của bạn với DLL, mỗi lần những phụ thuộc thay đổi (nên rất không thường xuyên), bạn xây dựng một DLL (tạo thành một gói javascript và tệp JSON manifest) và kết thúc tốt đẹp tất cả những phụ thuộc đó trong một gói duy nhất. Gói đó sau đó được tham chiếu khi kéo các phụ thuộc đó vào ứng dụng.

Một ví dụ nhanh:

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

...và sau đó tham chiếu như vậy -

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