Webpack高级配置（干货2）

39.CodeSplit 优化代码运行性能

entry由字符串变成对象，里面的key是chunk的name，值是入口文件
output中输出打包名字"[name].js"当 index和index1里面都 引入a.js 和 jquery.js等时，打包后每一个bundle里都会有a和juery，使得体积变大，所以需要提炼出来，分包满足以下配置，就会单独打包
例如：引用次数超过2次，超过5万kb一定打包等等如果不配置 miniChunks ，会把所有的modules都打包到一个里面拆分第三方库和业务代码 vendors拆分指定文件： locallib（diy）分包需要配置
module.exports = {//...optimization: {// 分包的默认配置splitChunks: {chunks: 'all', // 以下是默认值minSize: 20000, // 分割代码最小的大小minRemainingSize: 0, // 类似于miniSize，最后确保提取的文件大小不能为0minChunks: 1, // 至少被引用的次数，满足条件才会代码分割maxAsyncRequests: 30, // 按需加载时并行加载的文件的最大数量（数量多，请求会变多）maxInitialRequests: 30, // 入口js文件最大并行请求数量enforceSizeThreshold: 50000, // 超过50000kb一定会单独打包（此时会忽略minRemainingSize，maxAsyncRequests， maxInitialRequests）也就是总数，可能超过30cacheGroups: { // 组 那些模块要打包到一个组<!-- defaultVendors: { // 组名test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块priority: -10, // 权重（越大越高）reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块}, -->default: { // 其他没有写的配置会使用上面的默认值minChunks: 2, // 这里的minChunks圈中更大priority: -20,reuseExistingChunk: true,},vendors: { //拆分第三方库（通过npm|yarn安装的库）test: /[\\/]node_modules[\\/]/,name: 'vendor',chunks: 'initial',priority: -10},locallib: { //拆分指定文件test: /(src\/locallib\.js)$/,name: 'locallib',chunks: 'initial',priority: -9}},},},
};

40.CodeSplit按需加载，性能优化

一些依赖在点击操作后才会加载，初始化时无需import加载
可以在使用时动态import
import('./src/xxx.js').then((res) => {}).catch((err) => {})

41.eslint 不支持动态倒入语法，需要引入import的plugin

webpack.config.js
plugin: ['import'
]

42.图片，字体等命名规则，可以提取复用

outPut里加assetModuleFilename: "static/media/[hash:10][ext][query]"

43.preload/prefatch

preload: 告诉浏览器立即加载资源
prefetch：告诉浏览器空闲时才开始加载资源共同点：
都只会加载资源，并不执行
都有缓存区别：
preload 加载优先级高，prefetch加载优先级低
preload 只能加载