Первоначально я разработал приложение на AngularJS, а затем изменил его на Angular2. Используя Webpack и наблюдая за изменениями в файлах, всякий раз, когда я вносил изменения в файл .js или .ts, я мог немедленно переходить в браузер, обновлять и сразу же видеть результаты.
Теперь, год спустя, я обновился до VS2017, Angular 6, новейшего веб-пакета и aspnetcore 2.1, и хотя проект теперь работает хорошо, я заметил, что сборка теперь занимает значительно больше времени. Это занимает около 15 секунд, и хотя это не кажется долгим, это означает, что, если я немедленно запусту браузер, исходная проблема, которую я только что исправил, все еще остается. Так что теперь я должен ждать завершения сборки.
Я могу быть слепым, но не вижу очевидного способа определить, когда сборка завершена, помните, что это делается из VS2017, поэтому я приступил к проверке времени вывода файла в проводнике, который утомителен и должен быть более простой способ узнать, когда он закончится.
Но что еще более важно, что может быть причиной того, что сборка занимает намного больше времени, чем раньше. Проект по сути тот же, и он не похож на огромный проект с тысячами файлов.
Ниже приведена копия моего webpack.config.js и вывод консоли из сборки разработки:
/// <binding ProjectOpened='Watch - Development, Run - Development' />
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
mode: 'development';
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [new CheckerPlugin()]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot-client.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin()
])
});
return [clientBundleConfig];
};
C:\Users\user\Documents\Visual Studio 2017\Projects\MyProject> cmd /c SET NODE_ENV=development&& webpack --color
Hash: 773e6ade4cdcc7107597
Version: webpack 4.17.1
Child
Hash: 773e6ade4cdcc7107597
Time: 12987ms
Built at: 09/01/2018 6:05:36 PM
Asset Size Chunks Chunk Names
main-client.js 1.44 MiB 0 [emitted] [big] main-client
main-client.js.map 5.22 MiB 0 [emitted] main-client
Entrypoint main-client [big] = main-client.js main-client.js.map
WARNING in ./node_modules/@angular/core/fesm5/core.js 4996:15-36
Critical dependency: the request of a dependency is an expression
@ ./ClientApp/app/app.module.client.ts
@ ./ClientApp/boot-client.ts
WARNING in ./node_modules/@angular/core/fesm5/core.js 5008:15-102
Critical dependency: the request of a dependency is an expression
@ ./ClientApp/app/app.module.client.ts
@ ./ClientApp/boot-client.ts
WARNING in ./node_modules/@angular/core/fesm5/core.js 4996:15-36
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
@ ./ClientApp/app/app.module.client.ts 7:0-41 86:4-12
@ ./ClientApp/boot-client.ts
WARNING in ./node_modules/@angular/core/fesm5/core.js 5008:15-102
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
@ ./ClientApp/app/app.module.client.ts 7:0-41 86:4-12
@ ./ClientApp/boot-client.ts
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
main-client.js (1.44 MiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main-client (1.44 MiB)
main-client.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Process terminated with code 0.
Любая обратная связь приветствуется.