打包文件太大

一般情况下，直接require第三方库，比如jquery，然后webpack会自动把第三方库打包进bundle.js里面去，这样就造成了三个问题：

1. bundle.js的文件会非常大。
2. 每次更新bundle.js的时候根本没有更新第三方库，但是用户仍然要下载包含所有第三方库的bundle.js，不利于缓存。
3. 更新第三方库的时候很麻烦，又要重新下bundle.js。(虽然这种情况很少)

 这里暂且提出一个解决方案

  在webpack.prod.conf.js中写入如下代码：

let checksArray = {
   //例如：
  'element-ui': ['element-ui'],
}

let plugsArray = []
Object.keys(checksArray).forEach((key1, index1) => {
  let modules = []
  Object.keys(checksArray).forEach((key2, index2) => {
    if (index1 <= index2) {
      modules = modules.concat(Array.isArray(checksArray[key2])?checksArray[key2]:[checksArray[key2]])
    }
  })

  let minChunks = (function (modules) {
    return function (module) {
      let result = false
      modules.forEach((name)=>{
        result = result || module.resource.toLowerCase().indexOf(name) !== -1
      })
      return (
        module.resource &&
        /\.js$/.test(module.resource) &&
        module.resource.indexOf(
          path.join(__dirname, '../node_modules'),
        ) === 0 && result
      )
    }
  }(modules))

  let plugs = new webpack.optimize.CommonsChunkPlugin({
    name: key1,
    minChunks,
  })
  plugsArray.push(plugs)
})

const webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    ...plugsArray,
  ],
})

即可对代码的包进行分割。

 

转载于:https://www.cnblogs.com/zhouyideboke/p/10519114.html