code splitting代码分包

将一个大的js文件拆成多个，可以让浏览器并行加载，速度一般会更快一些

cnpm i lodash --save

entry: {
	lodash:'./lodash.js',
	main: './index.js'
	},

入口也变成了多个了，注意加载的先后依赖顺序

webpack代码分割/代码分包

optimization:{
	splitChunks:{
		chunks:"all"
	}
}

实验语法使用配置

cnpm i babel-plugin-dynamic-import-webpcak --save-dev

在.babelrc 中配置一下

{
	......
	"plugins": ["dynamic-import-webpcak"]
} 

提示

这不是官方插件，可以更换为 @babel/plugin-syntax-dynamic-import

webpack代码分割两种形式

• 同步代码分割 -> 配置 optimization 即可
• 异步代码分割 -> 如使用函数和promise动态引入的，无需配置，会自动进行分割

splitChunks

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',//对哪些代码分割，async只对异步，all则为同步异步,initial对同步代码分割
      minSize: 30000,//大于minSize做代码分割
      maxSize: 0,//对已分割的文件如果过大还可以再度分割，但是不一定能分割成功
      minChunks: 1,//达到依赖次数多少才打包
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      automaticNameMaxLength: 30,
      name: true,
	  //cacheGroups缓存组 对同步代码打包的一些配置
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
		  //filename:"xxx.js"//文件名，可配置
        },
        default: {
          minChunks: 2,
          priority: -20,//优先级
          reuseExistingChunk: true//已经在别的文件打包过得代码再次使用忽略
        }
      }
    }
  }
};

optimization: {
   splitChunks: {
      chunks: "all",
      cacheGroups: {
        // layouts通常是admin项目的主体布局组件，所有路由组件都要使用的
        // 可以单独打包，从而复用
        // 如果项目中没有，请删除
        layouts: {
          name: "layouts",
          test: path.resolve(__dirname, "../src/layouts"),
          priority: 40,
        },
        // 如果项目中使用element-plus，此时将所有node_modules打包在一起，那么打包输出文件会比较大。
        // 所以我们将node_modules中比较大的模块单独打包，从而并行加载速度更好
        // 如果项目中没有，请删除
        elementUI: {
          name: "chunk-elementPlus",
          // 不同系统的斜杠可能不一样\/，最好都处理一下
          test: /[\\/]node_modules[\\/]_?element-plus(.*)/,
          priority: 30,
        },
        // 将vue相关的库单独打包，减少node_modules的chunk体积。
        vue: {
          name: "vue",
          test: /[\\/]node_modules[\\/]vue(.*)[\\/]/,
          chunks: "initial",
          priority: 20,
        },
        libs: {
          name: "chunk-libs",
          test: /[\\/]node_modules[\\/]/,
          priority: 10, // 权重最低，优先考虑前面内容
          chunks: "initial",
        },
      },
    }
}