我试图在带1200个模块（95%供应商）的watch模式下优化我们的6s构建时间。我试图理解正在发生的事情，以便使其更快。
我不明白以下几点：
- [emitted]是否表示已构建了给定的chunk？
- 如何验证给定的chunk是否已重新构建？
- 如何查看chunkHash？（我想确保webpack使用md5的方式与我相同）
- 我可以寻找哪些优化措施？
事实如下：
- 如果应用程序代码有更改，则在watch模式下不会将供应商打包写入磁盘，我通过修改日期进行了验证，并通过删除它进行了验证。当触发重建时，该文件未被创建。同时，供应商代码的md5哈希值不会改变。
- 大部分时间花费在模块构建上，模块计数器从0-1200运行。
webpack配置如下：
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WatchIgnorePlugin = require('watch-ignore-webpack-plugin')
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
function isExternal(module) {
var userRequest = module.userRequest;
if (typeof userRequest !== 'string') {
return false;
}
return userRequest.indexOf('bower_components') >= 0 ||
userRequest.indexOf('node_modules') >= 0 ||
userRequest.indexOf('libraries') >= 0;
}
module.exports = {
context: __dirname + "/src",
cache: true,
cacheDirectory: '.cache',
entry: {
index: ["babel-polyfill", "./index"],
login: "./login"
},
resolve: {
alias: {
config: path.join(__dirname, 'src/config', `${process.env.NODE_ENV || 'development'}`)
},
modulesDirectories: [
'node_modules',
],
unsafeCache: true,
extensions: ["", ".js", ".jsx"]
},
devtool: 'eval',
module: {
loaders: [{
test: /\.scss$/,
include: /src/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract('css!sass')
}, {
test: /\.css$/,
exclude: /node_modules/,
include: /src/,
loaders: ['style', 'css?sourceMap'],
},
{
test: /\.jsx?$/,
include: /src/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
"cacheDirectory": ".cache",
"presets": ["es2015", "stage-0", "react"],
"plugins": ["transform-class-properties", "transform-object-rest-spread"]
}
}],
noParse: [
/underscore\/underscore\.js$/,
/react-with-addons\.js$/,
]
},
output: {
filename: "[name].bundle.js",
path: __dirname + "/dist",
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function(module) {
return isExternal(module);
},
}),
new WatchIgnorePlugin([
path.resolve(__dirname, './node_modules/'),
path.resolve(__dirname, './.git/')
]),
new CopyWebpackPlugin([
{ from: 'static', to: 'static' }
]),
new CopyWebpackPlugin([
{ from: 'login.html', to: 'login.html' }
]),
new CopyWebpackPlugin([
{ from: 'index.html', to: 'index.html' }
]),
new ExtractTextPlugin('[name].css', {
allChunks: true
})
],
watchOptions: {
poll: 300,
ignore: /node_modules/,
},
externals: {}
}
在监视模式下的输出:
[mip] (+master)> node node_modules/webpack/bin/webpack.js --watch --progress --display-chunks --display-cached --display-reasons -v
Hash: fadbfa42fdd7810886d6
Version: webpack 1.13.3
Time: 6346ms
Asset Size Chunks Chunk Names
index.bundle.js 582 kB 0 [emitted] index
login.bundle.js 8.88 kB 1 [emitted] login
vendor.bundle.js 4.9 MB 2 [emitted] vendor
index.css 87.2 kB 0 [emitted] index
login.css 44.4 kB 1 [emitted] login
static/img/logo.png 4.28 kB [emitted]
static/img/favicon.ico 270 kB [emitted]
login.html 573 bytes [emitted]
index.html 574 bytes [emitted]
chunk {0} index.bundle.js, index.css (index) 519 kB {2} [rendered]
[0] multi index 40 bytes {0} [built]
+ 100 hidden modules
chunk {1} login.bundle.js, login.css (login) 7.33 kB {2} [rendered]
+ 5 hidden modules
chunk {2} vendor.bundle.js (vendor) 4.41 MB [rendered]
+ 1191 hidden modules