我尝试使用 1200 个模块(95% 的 vendor )在观察模式下优化我们的 6s 构建时间。我试着了解正在发生的事情,这样我就可以让它更快。
我不明白的地方:
- [emitted] 是否意味着给定的 block 已构建?
- 如何验证给定的 block 是否已重建?
- 如何查看 chunkHash? (我想确保 webpack 看到的方式与我使用 md5 的方式相同)
- 我可以寻求哪些优化?
事实:
- 如果应用程序代码发生变化, vendor 包不会以监视模式写入磁盘,我使用修改日期进行了验证并删除了它。触发重建时未创建该文件。此外,md5 哈希值不会因 vendor 代码而改变。
- 大部分时间花在构建模块上,模块计数器从 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: {}
}
watch 模式下的输出:
[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
最佳答案
如果您想加快初始开发构建速度,您将希望减少 Webpack 花在分析 block 上的时间,减少 HTTP 请求的数量,为增量更改引入 HMR..
您可以从删除 CommonsChunkPlugin
和 ExtractTextPlugin
开始。如果您希望从等式中获取 vendor 模块,那么您可以在一次编译中使用 DllPlugin
将它们构建为一个库,然后继续使用 DllReferencePlugin
将它们重新用于您的主包编译只要 vendor 来源不变。您可以在 optimization documentation 中阅读更多相关信息, 但这是一个很好的 article by Rob Knight他在其中提供了更多详细信息。
最后,当配置加载器时,真的没有必要询问 Webpack 是否正确地使 block 无效。他们装备精良,可以跟踪磁盘上的依赖项,并将明智地使任何后续内容无效。我可以推荐webpack-bundle-analyzer分析您的输出。
关于javascript - 了解 Webpack 输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40958318/