原文链接：vue的vendors优化

随着项目越来越大，用的插件越来越多，vendors也越来越大。vue-cli打包是根据减少http请求数的规则进行打包，而我在网站性能优化的时候说过，异步加载js会减少将近一半的时间，但又不能分太多js出来，分太多js会导致http请求过多而拖慢网站速度，这个度需要根据自己项目来分或者和。

拆分vendors

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'
module.exports = {
  configureWebpack: config => {
      if (isProduction) {
        // 将每个依赖包打包成单独的js文件
        let optimization = {
          runtimeChunk: 'single',
          splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 300000,
            cacheGroups: {
              vendor: {
                test: /[\\/]node_modules[\\/]/,
                name (module) {
                  // get the name. E.g. node_modules/packageName/not/this/part.js
                  // or node_modules/packageName
                  const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                  // npm package names are URL-safe, but some servers don't like @ symbols
                  return `npm.${packageName.replace('@', '')}`
                }
              }
            }
          }
        }
        Object.assign(config, {
          optimization
        })
      }
  },
};