关于性能优化之分包

在项目build打包之后会有一个chunk-vendors.js文件包，该模块通常是我们装的node_modules依赖包，包含了引用的所有的第三方包(默契像Vue CLI一般默认使用了Tree Shaking配置【可以去除一些没引用的包】)，所以有时候项目用的插件较多时chunk-vendors.js会比较大,为了提高首屏首次加载速度，这里做一个分包，能够较大提升加载速度

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    maxInitialRequests: Infinity,
    minSize: 20000,
    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('@', '')}`
        }
      }
    }
  }
}

在这个配置中：

test: /[\\/]node_modules[\\/]/ 匹配 node_modules 目录下的所有模块。 name: 'chunk-vendors' 将这些模块打包到一个名为 chunk-vendors.js 的文件中。 chunks: 'all' 表示这个拆分适用于所有类型的代码块

vue中配置路径如下：vue.config.js >>> module.exports >>> configureWebpack