了解 Webpack 输出

Question

我尝试使用 1200 个模块（95% 的供应商）在监视模式下优化我们的 6s 构建时间。我试图了解正在发生的事情，以便我可以让它更快。

我不明白的事情：

• [emitted] 是否表示给定块已构建？
• 如何验证给定块是否已重建？
• 如何查看chunkHash？ （我想确保 webpack 看到的方式与我使用 md5 的方式相同）
• 我可以寻找哪些优化？

事实：

• 如果应用程序代码发生更改，供应商捆绑软件不会在监视模式下写入磁盘，我使用修改日期验证并删除它。触发重建时未创建文件。此外，供应商代码的 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: {}
}

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 在分析块上花费的时间，减少 HTTP 请求的数量，引入 HMR 以进行增量更改。..

您可以先删除CommonsChunkPlugin 和ExtractTextPlugin。如果您希望从等式中获取供应商模块，那么您可以在一次编译中使用DllPlugin 将它们构建为一个库，然后只要供应商源不改变，就可以继续使用DllReferencePlugin 将它们重用于您的主包编译.您可以在 optimization documentation 中阅读更多相关信息，但这里有一个出色的 article by Rob Knight，他提供了更多详细信息。

最后，在配置加载器时，真的不需要询问 Webpack 是否正确地使块无效。它们能够很好地跟踪磁盘上的依赖关系，并且会明智地使以后的任何内容失效。我可以推荐webpack-bundle-analyzer 来分析您的输出。