Question

我发现了很多webpack的文章，他们说使用alias和noParse会加快webpack的构建。

以下是我的webpack.config.js（不包含alias和noParse）：

module.exports = {
  entry: [
    './client/app/main.js'
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public/build/'),
    publicPath: "/public/build/"
  },
  resolve: {
    root: path.resolve('./client')
  },
  module: {
    preLoaders: [
      { test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/ }
    ],
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      { test: /\.less$/, loader: 'style!css!less' },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'file-loader'
      }
    ],
  },
  eslint: {
    configFile: path.resolve(__dirname, '.eslintrc'),
    formatter: require("eslint-friendly-formatter"),
    failOnError: true
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
         NODE_ENV: JSON.stringify('production')
       }
   }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ],
}

这是构建结果：

> NODE_ENV=production webpack -p --profile  --progress --config webpack.config.prod.js

34954ms build modules
51ms seal
78ms optimize
38ms hashing
85ms create chunk assets
27964ms additional chunk assets
38124ms optimize chunk assets
1ms optimize assets
193ms emit
Hash: b2527106c601e3cd97c6
Version: webpack 1.13.1
Time: 101504ms
                                 Asset     Size  Chunks             Chunk Names
  e79bfd88537def476913f3ed52f4f4b3.eot   143 kB          [emitted]
  a37b0c01c0baf1888ca812cc0508f6e2.ttf   128 kB          [emitted]
 3c3d0242794b4682460a3f7c7a2126ee.woff  78.8 kB          [emitted]
c58629e330eaf128316a142320407d74.woff2  42.3 kB          [emitted]
  9f916e330c478bbfa2a0dd6614042046.eot  16.2 kB          [emitted]
  3d3a53586bd78d1069ae4b89a3b9aa98.svg    49 kB          [emitted]
  38861cba61c66739c1452c3a71e39852.ttf  32.7 kB          [emitted]
 16e1d930cf13fb7a956372044b6d02d0.woff  18.5 kB          [emitted]
7e367be02cd17a96d513ab74846bafb3.woff2  14.6 kB          [emitted]
                             bundle.js  2.23 MB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
       factory:1ms building:1ms = 2ms
    + 1038 hidden modules

但是，当我添加alias和noParse时，如下所示：

var nodeModules = path.resolve(__dirname, 'node_modules')
var alias = {
  'jquery': path.resolve(nodeModules, 'jquery/dist/jquery.min.js'),
  'react$': path.resolve(nodeModules, 'react/dist/react-with-addons.min.js'),
  'react/addons': 'react',
  'react/lib': 'react',
  'react/dist': 'react',
  'react-dom': path.resolve(nodeModules, 'react-dom/dist/react-dom.min.js'),
  'redux': path.resolve(nodeModules, 'redux/dist/redux.min.js'),
  'react-redux': path.resolve(nodeModules, 'react-redux/dist/react-redux.min.js'),
  'redux-thunk': path.resolve(nodeModules, 'redux-thunk/dist/redux-thunk.min.js'),
  'redux-form': path.resolve(nodeModules, 'redux-form/dist/redux-form.min.js'),
  'react-router': path.resolve(nodeModules, 'react-router/umd/ReactRouter.min.js'),
  'react-router-redux': path.resolve(nodeModules, 'react-router-redux/dist/ReactRouterRedux.min.js'),
  'history': path.resolve(nodeModules, 'history/umd/History.min.js'),
  'react-dnd': path.resolve(nodeModules, 'react-dnd/dist/ReactDnD.min.js'),
  'react-dnd-html5-backend': path.resolve(nodeModules, 'react-dnd-html5-backend/dist/ReactDnDHTML5Backend.min.js'),
  'react-ace': path.resolve(nodeModules, 'react-ace/dist/react-ace.min.js'),
  'lodash$': path.resolve(nodeModules, 'lodash/lodash.min.js'),
  'js-yaml': path.resolve(nodeModules, 'js-yaml/dist/js-yaml.min.js')
}

var noParse = Object
  .keys(alias)
  .map(name => alias[name].split('/').pop())
  .filter(p => p !== 'react')
  .map(p => p.substring(0, p.length - 7))
  .map(p => new RegExp(p))

构建结果：

> NODE_ENV=production webpack -p --profile  --progress --config webpack.config.prod.js

38321ms build modules
19ms seal
42ms optimize
33ms hashing
80ms create chunk assets
41824ms additional chunk assets
45464ms optimize chunk assets
1ms optimize assets
156ms emit
Hash: cad624b3743747e89870
Version: webpack 1.13.1
Time: 125954ms
                                 Asset     Size  Chunks             Chunk Names
  e79bfd88537def476913f3ed52f4f4b3.eot   143 kB          [emitted]
  a37b0c01c0baf1888ca812cc0508f6e2.ttf   128 kB          [emitted]
 3c3d0242794b4682460a3f7c7a2126ee.woff  78.8 kB          [emitted]
c58629e330eaf128316a142320407d74.woff2  42.3 kB          [emitted]
  9f916e330c478bbfa2a0dd6614042046.eot  16.2 kB          [emitted]
  3d3a53586bd78d1069ae4b89a3b9aa98.svg    49 kB          [emitted]
  38861cba61c66739c1452c3a71e39852.ttf  32.7 kB          [emitted]
 16e1d930cf13fb7a956372044b6d02d0.woff  18.5 kB          [emitted]
7e367be02cd17a96d513ab74846bafb3.woff2  14.6 kB          [emitted]
                             bundle.js  2.49 MB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
       factory:1ms building:2ms = 3ms
    + 582 hidden modules

我不知道为什么它会变慢，谁能告诉我？感谢。

Answer 1

如果UglifyJSPlugin收到压缩文件会使webpack执行进度（additional chunk assets和optimize chunk assets）非常慢。

您可以将这些代码添加到webpack.config.js

plugins: [ ...some other config... new webpack.optimize.UglifyJsPlugin({ sourceMap: false, minimize: true, compress: { drop_debugger: true, warnings: false, drop_console: true } }), ...some other config... ], devtool: 'cheap-eval-source-map',

sourceMap: false和devtool: 'cheap-eval-source-map'非常重要！

然后你需要修改package.json来改变webpack（或webpack-dev-server）运行命令（添加一些参数）：

"scripts": { "start": "webpack-dev-server --debug --devtool cheap-eval-source-map --output-pathinfo", },

--debug --devtool cheap-eval-source-map --output-pathinfo会使你的命令运行速度显着提高，现在也不慢！

添加别名和noParse后，为什么我的webpack生成版本会变慢？

1 个答案: