Мое приложение мигрировало с 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
}
Строитель сказал мне, что у меня 1143 модуля. И я получаю очень медленную сборку зависимостей, просто посмотрите
app/app/app-routing.module.ts 3.24 KiB [built]
| [] 13483ms -> [] 232ms -> factory:24022ms building:7ms dependencies:196551ms = 234295ms