了解Webpack输出

Question

我尝试使用1200个模块（95％供应商）在手表模式下优化我们的6s构建时间。我试着了解发生了什么，所以我可以加快速度。

事情我不明白：

• 是[发出]是指给定块建？
• 如何验证给定块是否重建？
• 如何查看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: {} 
} 

在计时模式下的输出：

[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来分析你的输出。