原文鏈接：vue的vendors優(yōu)化

隨著項目越來越大，用的插件越來越多，vendors也越來越大。vue-cli打包是根據(jù)減少http請求數(shù)的規(guī)則進行打包，而我在網(wǎng)站性能優(yōu)化的時候說過，異步加載js會減少將近一半的時間，但又不能分太多js出來，分太多js會導(dǎo)致http請求過多而拖慢網(wǎng)站速度，這個度需要根據(jù)自己項目來分或者和。

拆分vendors

// 是否為生產(chǎn)環(huán)境
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
        })
      }
  },
};