我们的应用程序基于Angular 4.0。我们正在努力使用webpack 3.8.1来减少编译时间。
目前，每次更改都需要大约23到25分钟的时间。
我们的应用程序有514个模块和313个块。一些模块是延迟加载的。我们正在使用webpack中的system.import来动态导入这些模块。
我们希望减少高级模块优化所需的时间。
我们尝试了几乎与此问题相关的所有解决方案，但没有运气。
以下是构建统计信息：
59944ms [0] building modules
137455ms [0] sealing
2ms [0] optimizing
1ms [0] basic module optimization
91ms [0] module optimization
1379558ms [0] advanced module optimization
1ms [0] basic chunk optimization
0ms [0] chunk optimization
1ms [0] advanced chunk optimization
1ms [0] module and chunk tree optimization
1ms [0] chunk modules optimization
0ms [0] advanced chunk modules optimization
56ms [0] module reviving
14ms [0] module order optimization
33ms [0] module id optimization
35ms [0] chunk reviving
63ms [0] chunk order optimization
150ms [0] chunk id optimization
385ms [0] hashing
4ms [0] module assets processing
1356ms [0] chunk assets processing
24ms [0] additional chunk assets processing
1ms [0] recording
2ms [0] additional asset processing
2ms [0] chunk asset optimization
11288ms [0] asset optimization
630ms [0] emitting
[0] Hash: e37b2ca0d0e832e77295
Version: webpack 3.8.1
Child
Hash: e37b2ca0d0e832e77295
Time: 1591168ms
这是我的package.json：
{
"name": "shipcom",
"version": "1.0.0",
"description": "",
"main": "main.ts",
"scripts": {
"build:libs": "webpack --config stdpkgs.webpack.config.js",
"start": "webpack --config webpack.config.js --progress --profile --bail",
"build": "ngc -p tsconfig-aot.json"
},
"keywords": [
"Shipcom"
],
"author": "MS",
"license": "ISC",
"dependencies": {
"@angular/animations": "^4.2.3",
"@angular/common": "^4.4.3",
"@angular/compiler": "^4.4.3",
"@angular/compiler-cli": "^4.4.3",
"@angular/core": "^4.4.3",
"@angular/forms": "^4.2.3",
"@angular/http": "^4.2.3",
"@angular/platform-browser": "^4.2.3",
"@angular/platform-browser-dynamic": "^4.2.3",
"@angular/router": "^4.2.3",
"@progress/kendo-angular-charts": "^1.2.0",
"@progress/kendo-angular-dateinputs": "^1.0.0",
"@progress/kendo-angular-dropdowns": "^0.38.3",
"@progress/kendo-angular-excel-export": "^1.0.0",
"@progress/kendo-angular-grid": "^1.2.0",
"@progress/kendo-angular-inputs": "^1.0.5",
"@progress/kendo-angular-intl": "^1.0.1",
"@progress/kendo-angular-l10n": "^1.0.1",
"@progress/kendo-angular-layout": "^0.21.2",
"@progress/kendo-angular-popup": "^1.1.0",
"@progress/kendo-angular-resize-sensor": "^1.0.0",
"@progress/kendo-angular-upload": "^1.1.1",
"@progress/kendo-charts": "^1.2.0",
"@progress/kendo-data-query": "^1.0.3",
"@progress/kendo-drawing": "^1.1.0",
"@progress/kendo-popup-common": "^1.0.0",
"@telerik/kendo-dropdowns-common": "^1.0.0",
"babel-polyfill": "^6.23.0",
"bootstrap": "3.3.7",
"class-transformer": "0.1.6",
"codemirror": "^5.26.0",
"core-js": "2.4.1",
"hammerjs": "^2.0.8",
"imports-loader": "^0.7.1",
"keycode-js": "0.0.4",
"less": "^2.3.1",
"less-loader": "^4.0.3",
"lodash": "^4.17.4",
"ng-dynamic": "^3.0.2",
"ng2-completer": "^1.5.2",
"ng2-dnd": "^4.0.2",
"ng2-file-upload": "^1.2.1",
"ngx-bootstrap": "^1.8.1",
"reflect-metadata": "^0.1.8",
"rxjs": "^5.4.1",
"webpack": "^3.8.1",
"zone.js": "^0.8.12"
},
"devDependencies": {
"@angular/cli": "^1.4.2",
"@types/core-js": "0.9.34",
"@types/jasmine": "^2.6.0",
"@types/lodash": "^4.14.50",
"@types/node": "6.0.46",
"angular-router-loader": "^0.6.0",
"angular2-template-loader": "0.6.0",
"awesome-typescript-loader": "^3.0.3",
"babel-plugin-dynamic-import-webpack": "^1.0.1",
"bootstrap-loader": "^2.1.0",
"bootstrap-sass": "^3.3.7",
"bootstrap-webpack": "0.0.5",
"css-loader": "^0.28.7",
"file-loader": "0.9.0",
"fork-ts-checker-webpack-plugin": "^0.2.8",
"happypack": "^4.0.0",
"html-loader": "0.4.4",
"html-webpack-plugin": "2.24.1",
"image-webpack-loader": "^3.3.1",
"jasmine": "^2.8.0",
"jasmine-core": "^2.8.0",
"jasmine-spec-reporter": "^4.2.1",
"jquery": "^3.1.1",
"ngx-color-picker": "^4.3.0",
"node-sass": "^3.11.2",
"parallel-webpack": "^2.2.0",
"protractor": "^5.1.2",
"protractor-beautiful-reporter": "^0.5.0",
"protractor-jasmine2-screenshot-reporter": "^0.4.1",
"raw-loader": "0.5.1",
"resolve-url-loader": "^1.6.0",
"rimraf": "2.5.4",
"rollup": "^0.50.0",
"rollup-plugin-commonjs": "^8.2.4",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-uglify": "^2.0.1",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"ts-loader": "^3.1.0",
"ts-node": "^3.3.0",
"typescript": "^2.4.0",
"url-loader": "^0.5.9",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.7.1",
"webpack-merge": "^4.1.0"
}
}
这是tsconfig.json：
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"lib": [ "es2015", "dom" ]
},
"files": [
"app/main.ts",
"app/index.ts"
],
"exclude": [
"node_modules"
],
"awesomeTypescriptLoaderOptions": {
"skipDeclarationFilesCheck ": true,
"transpileOnly": true
},
"compileOnSave": false,
"buildOnSave": false
}
以下是我的webpack.config文件：
> /// <binding AfterBuild='Run - Development' Clean='Run - Development'
> /> var webPack = require('webpack'); var htmlWebPack =
> require('html-webpack-plugin'); var path = require('path'); var
> BundleAnalyzerPlugin =
> require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
>
> var config = {
> //Updated entrypoints to use files with ngfactory bootstrap implementation for AOT
> entry: {
> 'app': './app/main-aot.ts',
> 'appl': './app/appMain-aot.ts',
> 'polyfills':'./deps/polyfills.ts'
> },
>
> resolve: {
> extensions: ['.ts', '.js', 'css'],
> symlinks: false,
> cacheWithContext: false,
> modules: [
> path.resolve(__dirname, 'node_modules'),
> path.resolve(__dirname, 'source')]
> },
>
> devtool: 'eval',
>
> module: {
> rules: [
> {
> test: /\.ts$/,
> exclude: '/node_modules/',
> //Updated rules to use angular-router-loader with aot path configuration
> use: [
> 'awesome-typescript-loader',
> 'angular-router-loader?aot=true&genDir=aot/',
> 'angular2-template-loader'
> ]
> },
> {
> test: /\.html$/,
> loader: 'raw-loader'
> },
> {
> test: /\.css$/,
> use: ["style-loader", "css-loader"]
> },
> {
> test: /\.scss$/,
> use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
> },
> {
> test: /\.(woff2?|ttf|eot|svg)$/,
> loader: 'url-loader?limit=10000'
> },
> {
> test: /bootstrap\/dist\/js\/umd\//,
> loader: 'imports-loader?jQuery=jquery'
> },
> {
> test: /\.(jpe?g|png|gif|svg)$/i,
> use: [
> { loader: "file-loader", options: { hash: "sha512", digest: "hex", name: "[hash].[ext]" } },
> { loader: "image-webpack-loader", options: { bypassonDebug: true, optimizationLevel: 7, interlaced: false } }
> ]
> }
> ]
> },
>
> plugins: [
> new BundleAnalyzerPlugin(),
>
> new webPack.ContextReplacementPlugin(
> /angular(\\|\/)core(\\|\/)@angular/,
> path.resolve(__dirname, './')
> ),
>
> new webPack.ProvidePlugin({
> jQuery: 'jquery',
> $: 'jquery',
> jquery: 'jquery'
> }),
>
> new webPack.DllReferencePlugin({
> context: path.resolve(__dirname),
> manifest: require(path.resolve(__dirname, 'dist/stdpkgs-manifest.json'))
> }),
> ],
> output: {
> path: path.resolve(__dirname, 'dist'),
> filename: '[name].js',
> //library: '[name]_lib',
> chunkFilename: 'chunk/[name].js',
> publicPath: 'dist/',
> } }; module.exports = config;