javascript - 了解 Webpack 输出

Question

我尝试使用 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

Answer 1

如果您想加快初始开发构建速度，您将希望减少 Webpack 花在分析 block 上的时间，减少 HTTP 请求的数量，为增量更改引入 HMR..

您可以从删除 CommonsChunkPlugin 和 ExtractTextPlugin 开始。如果您希望从等式中获取 vendor 模块，那么您可以在一次编译中使用 DllPlugin 将它们构建为一个库，然后继续使用 DllReferencePlugin 将它们重新用于您的主包编译只要 vendor 来源不变。您可以在 optimization documentation 中阅读更多相关信息, 但这是一个很好的 article by Rob Knight他在其中提供了更多详细信息。

最后，当配置加载器时，真的没有必要询问 Webpack 是否正确地使 block 无效。他们装备精良，可以跟踪磁盘上的依赖项，并将明智地使任何后续内容无效。我可以推荐webpack-bundle-analyzer分析您的输出。