webpack 在打包过程中可能会有各种因素导致打包速度很慢进而影响开发体验,接下来我们就逐个分析。

可能因素

  • 文件多
  • 依赖多
  • 页面多

解决

  • 方法一
    • 分开 vendor(第三方代码)和 app(业务代码)
    • DllPlugin(如果业务代码引入第三方库,通过这两个插件可以解决重复打包)
    • DllReferencePlugin
  • 方法二
    • UglifyJsPlugin(耗时,并行处理)
      • parallel(默认线程数-1 的速度)
      • cache
  • 方法三
    • HappyRack(文件处理串行变并行)
    • HappyRack.ThreadPool(线程池)
  • 方法四
    • babel-loader
      • options.cacheDirectory(缓存)
      • include(尽可能的缩小范围)
      • exclude(尽可能的缩小范围)
  • 其它
    • 减少 resolve
    • Devtool:去除 sourcemap
    • cache-loader
    • 升级 node
    • 升级 webpack

我们以 vue 项目为例

方法一

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    vue: ['vue', 'vue-router'],
    ui: ['element-ui']
  },
  output: {
    path: path.join(__dirname, '../src/dll/'),
    filename: '[name].dll.js',
    library: '[name]'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '../src/dll/', '[name]-manifest.json'),
      name: '[name]'
    }),

    new webpack.optimize.UglifyJsPlugin()
  ]
}
// webpack.prod.conf.js

plugins: [
  new webpack.DllReferencePlugin({
    manifest: require('../src/dll/ui-manifest.json')
  }),
  new webpack.DllReferencePlugin({
    manifest: require('../src/dll/vue-manifest.json')
  })
}

方法二

new webpack.optimize.UglifyJsPlugin({
  parallel: true,
  cache: true,
  sourceMap: 去掉
})

方法三

$ npm i happypack -D
const HappyPack = require('happypack')

{
  test: /\.vue$/,
  loader: 'happypack/loader?id=vue',
  options: vueLoaderConfig
}

plugins: [
  new HappyPack({
    id: 'vue',
    loaders: [{
      loader: 'vue-loader',
      option: require('./vue-loader.conf')
    }]
  })
]

happypack 会并行处理 loader,但是如果文件过少反而会增加打包时间,一般在文件较多的大型项目下使用