我的应用程序从Angular 4迁移到angular 6，我将VS15切换到VS17（Angular和asp.net core 2+的堆栈）。 在进行此开发之前，请花费大约3分钟的时间。现在大约需要20-25分钟。
我已经尝试将devtool更改为eval或false，还尝试了webpack-node-externals。还是同一时间。
这是我的配置：
package.json
"scripts": {
"start": "concurrently \"webpack-dev-server --env=dev --open --hot --inline --port 8080\" \"dotnet run\" ",
"webpack-dev": "webpack --env=dev --progress --profile",
"webpack-production": "webpack --env=prod",
"build-dev": "npm run webpack-dev",
"build-aot-production": "npm run webpack-production",
"watch-webpack-dev": "webpack --env=dev --watch --color",
"watch-webpack-production": "npm run build-production --watch --color",
"publish-for-iis": "npm run webpack-production && dotnet publish -c Release",
"build": "npm run webpack-production && dotnet publish -c Release",
"build-prod": "npm run webpack-production && dotnet publish -c Release"
},
"dependencies": {
"@angular-devkit/core": "0.8.1",
"@angular/animations": "6.1.7",
"@angular/common": "6.1.7",
"@angular/compiler": "6.1.7",
"@angular/compiler-cli": "^6.1.8",
"@angular/core": "6.1.7",
"@angular/forms": "6.1.7",
"@angular/http": "6.1.7",
"@angular/platform-browser": "6.1.7",
"@angular/platform-browser-dynamic": "6.1.7",
"@angular/platform-server": "6.1.7",
"@angular/router": "6.1.7",
"@angular/upgrade": "6.1.7",
"@types/file-saver": "0.0.1",
"ajv": "5.2.3",
"angular2-modal": "3.0.3",
"angular2-text-mask": "8.0.4",
"bootstrap": "3.3.7",
"core-js": "2.5.1",
"file-saver": "^1.3.8",
"http-proxy-middleware": "0.17.4",
"ie-shim": "0.1.0",
"intl": "1.2.5",
"moment": "2.18.1",
"ng-select": "^1.0.1",
"ngc": "^1.0.0",
"pdfmake": "0.1.33",
"reflect-metadata": "~0.1.10",
"rxjs": "6.3.2",
"rxjs-compat": "6.3.2",
"systemjs": "0.19.39",
"tslib": "1.7.1",
"zone.js": "0.8.26"
},
"devDependencies": {
"@types/jquery": "3.2.12",
"@ngtools/webpack": "^6.2.1",
"@types/node": "^10.9.4",
"@types/express": "4.0.37",
"@angular/cli": "^6.0.7",
"angular-router-loader": "0.6.0",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "3.2.3",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"clean-webpack-plugin": "0.1.16",
"concurrently": "3.5.0",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "0.23.1",
"file-loader": "^2.0.0",
"html-loader": "0.5.1",
"html-webpack-plugin": "^3.2.0",
"jquery": "3.2.1",
"json-loader": "0.5.7",
"last": "1.1.0",
"raw-loader": "0.5.1",
"rimraf": "2.6.2",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.0",
"to-string-loader": "1.1.5",
"ts-node": "3.3.0",
"tslint": "4.5.1",
"tslint-loader": "3.5.3",
"typescript": "2.7.2",
"typings": "2.1.1",
"url-loader": "^1.1.1",
"webpack": "4.19.0",
"webpack-dev-server": "^3.1.8",
"webpack-cli": "^2.0.9",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-notifier": "1.5.0",
"webpack-node-externals": "^1.7.2",
"uglifyjs-webpack-plugin": "^1.3.0"
}
webpack.js：
const path = require('path');
const rxPaths = require('rxjs/_esm5/path-mapping');
const webpack = require('webpack');
const webpackTools = require('@ngtools/webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const ROOT = path.resolve(__dirname, '..');
console.log('-----------------------DEV BUILD:');
module.exports = {
mode: 'development',
devtool: 'source-map',
performance: {
hints: false
},
externals: [nodeExternals()],
entry: {
app: './app/main.ts'
},
output: {
path: ROOT + '/wwwroot/',
filename: 'dist/[name].bundle.js',
publicPath: '/'
},
resolve: {
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
},
devServer: {
historyApiFallback: true,
contentBase: path.join(ROOT, '/wwwroot/'),
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
},
module: {
rules: [
{
test: /\.ts$/,
use: [
'awesome-typescript-loader',
'angular-router-loader',
'angular2-template-loader',
'source-map-loader'
]
},
{
test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot|ico)$/,
use: 'file-loader?name=assets/[name].[ext]'
},
{
test: /\.css$/,
exclude: ['/node_modules/', '/fedresurs-app/css/'],
loaders: ['to-string-loader', 'css-loader']
},
{
test: /\.css$/,
include: ['./fedresurs-app/css/'],
exclude: ['/node_modules/'],
loaders: ['style-loader']
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.html$/,
use: 'raw-loader'
},
{
test: /\.(eot|ttf|woff|woff2|otf)$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}
],
exprContextCritical: false
},
plugins: [
function () {
this.plugin('watch-run', function (watching, callback) {
console.log(
'\x1b[33m%s\x1b[0m',
`Begin compile at ${new Date().toTimeString()}`
);
callback();
});
},
new webpackTools.AngularCompilerPlugin({
tsConfigPath: './tsconfig.json'
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
,
new CleanWebpackPlugin(['./wwwroot/dist', './wwwroot/assets'], {
root: ROOT
}),
new HtmlWebpackPlugin({
filename: 'index.html',
inject: 'body',
template: 'app/index.html'
})
]
};
tsconfig.json：
{ "compilerOptions": { "target": "es5", "module": "es2015", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": true, "noImplicitAny": false, "skipLibCheck": true, "noUnusedLocals": false, "noUnusedParameters": false, "lib": [ "es2015", "dom" ], "typeRoots": [ "./node_modules/@types/" ] }, "exclude": [ "node_modules", "./app/main-aot.ts", "./app/app/main-aot.ts" ], "awesomeTypescriptLoaderOptions": { "useWebpackText": true }, "files": [ "app/typings.d.ts" ], "compileOnSave": false, "buildOnSave": false }
Builder告诉我，我有1143个模块。而且我得到的依赖关系构建速度非常慢
app/app/app-routing.module.ts 3.24 KiB [built]
| [] 13483ms -> [] 232ms -> factory:24022ms building:7ms dependencies:196551ms = 234295ms
答案 0 :(得分：0)
正如评论中已经说过的，这可能是一个非常具体的情况，但是我会尝试给您一些提示，因为我也做了一些重大更新（角度4到5、5到6以及现在的6到7）并且来了提供一些对我有帮助的解决方案。
检查依赖项：
正如我在您的依赖项中看到的那样，其中有很多。您可以尝试搜索需要依赖的位置并尝试消除。如果发现只需要一小部分的依赖项，则可以尝试删除并实现自己。
另一个技巧是使您的导入语句具体化，例如：
import { MatDialogModule } from '@angular/material/dialog';
代替
import { MatDialogModule } from '@angular/material';
这将有助于减小捆绑包的大小，这是下一个主题。
检查分发包大小：
您可以使用webpack-bundle-analyzer检查捆绑包的大小，以检查实际捆绑的内容。如果您看到可疑的大部分，则可以对其进行研究。还要检查包括多少样式。
编辑：未看到您已经安装了该文件。
使用npm i webpack-bundle-analyzer --save-dev安装。
将以下脚本添加到package.json：
"scripts": {
"bundle-report": "ng build --stats-json && webpack-bundle-analyzer dist/stats.json"
}
最后以npm run bundle-report
尝试使用不同版本的@ angular-devkit / core：
我在许多地方读到，使用不同版本的@angular-devkit/core有助于减少构建时间。您可以尝试逐个版本升级，查看构建时间并相互比较。
其他个人提示：