我的网络包＆amp; webpack-dev-server构建速度非常慢。我将在下面列出我的package.json，webpack构建配置和统计信息。我尝试使用DLL插件（无效），Common Chunks，缓存节点模块删除一堆无用的节点模块。似乎没什么用。我也没有相关的全局npm包（如果这有所不同）。运行webpack-dev-server（重建时）的初始构建时间比使用常规的旧webpack慢（尽管速度也很慢）。
这很奇怪。有时我的应用程序在15秒内构建（使用webpack-dev-server），有时需要10分钟以上。通常很慢，很少需要几秒钟。
的package.json
{
"name": "xyz",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "NODE_ENV=production webpack --config webpack/prod.config.js --progress --profile --json > stats.json",
"dev": "NODE_ENV=development webpack-dev-server --config webpack/dev.config.js --hot --colors",
"dev:stats": "NODE_ENV=development webpack-dev-server --config webpack/dev.config.js --hot --colors --progress --profile",
"start": "NODE_ENV=production node bin/prod.js"
},
...
我的配置按 base ， dev 和 prod 分开。这是我的基础和开发配置。
base.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
resolve: {
alias: {
src: path.join(__dirname, '/../src/'),
lib: path.join(__dirname, '/../lib/'),
},
extensions: ['.jsx', '.js'],
},
module: {
rules: [
{ test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader', },
{ test: /\.(eot|ttf|woff|woff2)$/, exclude: /node_modules/, loader: 'file-loader?name=[name].[ext]' },
{ test: /\.(png)(\?.*|)$/, exclude: /node_modules/, loader: 'url-loader?limit=2000000&name=[name].[ext]' },
],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'node-static',
filename: 'node-static.js',
minChunks(module, count) {
const context = module.context;
return context && context.indexOf('node_modules') >= 0;
},
}),
],
};
dev.config.js
const merge = require('webpack-merge');
const baseConfig = require('./base.config');
const FlowWebpackPlugin = require('flow-webpack-plugin');
module.exports = merge(baseConfig, {
devtool: false,
devServer: {
inline: true,
contentBase: 'src',
port: 3000,
historyApiFallback: true,
proxy: {
'/api': 'http://localhost:9000',
},
},
module: {
rules: [
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]',
exclude: [/node_modules/],
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
],
},
plugins: [
new FlowWebpackPlugin(),
]
});
构建统计信息
> NODE_ENV=development webpack-dev-server --config webpack/dev.config.js --hot --colors --progress --profile
Project is running at http://localhost:3000/
webpack output is served from /
Content not from webpack is served from src
404s will fallback to /index.html
10616ms building modules s
9ms sealing
0ms optimizing
0ms basic module optimization
2ms module optimization
0ms advanced module optimization
9ms basic chunk optimization
0ms chunk optimization
0ms advanced chunk optimization
3ms module and chunk tree optimization
0ms chunk modules optimization
0ms advanced chunk modules optimization
32ms module reviving
1ms module order optimization
2ms module id optimization
0ms chunk reviving
0ms chunk order optimization
15ms chunk id optimization
17ms hashing
0ms module assets processing
56ms chunk assets processing
18ms additional chunk assets processing
0ms recording
0ms additional asset processing
0ms chunk asset optimization
150ms asset optimization
159ms emitting
Hash: 5ca0087e7e73b7089262
Version: webpack 3.8.1
Time: 105465ms
Asset Size Chunks Chunk Names
bundle.js 204 kB 0 [emitted] main
node-static.js 2.37 MB 1 [emitted] [big] node-static
index.html 553 bytes [emitted]
[0] ./node_modules/react/react.js 56 bytes {1} [built]
[] -> factory:283ms building:85ms = 368ms
[33] ./node_modules/react-router-dom/es/index.js 925 bytes {1} [built]
[] -> factory:361ms building:14ms = 375ms
[280] multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js 52 bytes {0} [built]
factory:1ms building:1ms = 2ms
[281] (webpack)-dev-server/client?http://localhost:3000 7.95 kB {1} [built]
[] -> factory:25ms building:24ms dependencies:2990ms = 3039ms
[282] (webpack)/node_modules/node-libs-browser/node_modules/url/url.js 23.3 kB {1} [built]
[] -> factory:22ms building:3024ms = 3046ms
[288] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {1} [built]
[] -> factory:6997ms building:14ms = 7011ms
[290] (webpack)-dev-server/node_modules/loglevel/lib/loglevel.js 7.74 kB {1} [built]
[] -> factory:6999ms building:46ms = 7045ms
[291] (webpack)-dev-server/client/socket.js 1.05 kB {1} [built]
[] -> factory:22ms building:2995ms = 3017ms
[293] (webpack)-dev-server/client/overlay.js 3.73 kB {1} [built]
[] -> factory:22ms building:3000ms = 3022ms
[298] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {1} [built]
[] -> factory:12ms building:9ms dependencies:3029ms = 3050ms
[300] (webpack)/hot/dev-server.js 1.56 kB {1} [built]
[] -> factory:55ms building:13ms = 68ms
[301] (webpack)/hot/log-apply-result.js 1.27 kB {1} [built]
[] -> factory:3031ms building:3944ms dependencies:0ms = 6975ms
[302] ./src/index.js 865 bytes {0} [built]
[] -> factory:73ms building:6772ms = 6845ms
[473] ./src/components/App/App.jsx 801 bytes {0} [built]
[] -> factory:202ms building:77ms dependencies:5ms = 284ms
[714] ./src/store.js 697 bytes {0} [built]
[] -> factory:202ms building:64ms = 266ms
+ 705 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 838 bytes {0} [built]
factory:23ms building:44ms = 67ms
[1] ./node_modules/html-webpack-plugin/node_modules/lodash/lodash.js 540 kB {0} [built]
[] -> factory:3004ms building:3974ms = 6978ms
[2] (webpack)/buildin/global.js 488 bytes {0} [built]
[] -> factory:9ms building:14ms = 23ms
[3] (webpack)/buildin/module.js 495 bytes {0} [built]
[] -> factory:9ms building:14ms = 23ms
webpack: Compiled successfully.