Code Splitting以及SplitChunksPlugin配置参数详解

刘煎蛋
1,254 阅读3分钟

这是我参与更文挑战的第5天，活动详情查看：更文挑战

什么是Code Splitting？

场景

现在我们在入口文件index.js中引入了一个第三方库lodash假设它是1mb，以及编写了几万行的业务代码也1mb，此时我运行npm run build打包时出一个main.js大小是2mb，接着我打开index.html它会加载一个 2mb 的 JS 文件就是main.js，他要等这个文件加载完成之后才会去执行文件里面的逻辑，才会去把页面展示出来,所有这样回带来两个问题？

  • 打包文件会很大，首屏加载时间会长；
  • 第三方的库，我们一般是不会去改动它的，但是我们的业务代码是经常需要改动的，假设我改动了业务逻辑接着重新打包，这时候会重新生成一个main.js还是2mb，我们重新访问页面时，又要重新加载2mb；

怎么解决？

这是第三方库和业务代码打包到一起的情况，生成一个main.js image.png

第三方库是不会变的而我们的业务代码是变的，这样的话我们就不能把它们两个的代码打包到一个文件里，如下图：

image.png

  • 业务代码都放到main.js中；
  • vendors~main.js放第三方库；

这就是Code Splitting代码分割，这里采用的是，在webpack中做配置自动进行代码分割；

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
}

再次打包后，重新访问页面就只会加载业务代码main.js，vendors~main.js已经被浏览器缓存起来了；

SplitChunksPlugin配置解析

splitChunks: {
    chunks: "all",
    minSize: 30000,
    maxSize: 50000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        vendors: {
            // 引入的库是否在node_modules里
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
        default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
        }
}
  • chunks的意思是对那些类型的代码进行分割，all是全部、async是异步、initial是同步;
  • minSize的意思是引入的模块必须大于30kb，才会进行代码分割；
  • maxSize的意思是如果引入的模块，如果大于50kb，进行二次分割，分成多个文件；
  • minChunks当模块引入次数大于1时，才会进行代码分割；
  • maxAsyncRequests同时加载5个以上的js文件，并行请求的最大数目为5；
  • maxInitialRequests 入口文件中，如果加载的模块大于3个时，不再进行代码分割；
  • automaticNameDelimiter表示拆分出的chunk的名称连接符。默认为~。如vendors~main.js;
  • name 可重新定义打包后的文件名称，cacheGroups的vendors的filename生效;
  • priority当一个文件的打包条件同时满足vendors以及default中的条件时,会根据priority的大小优先选择应用那个，数值越大优先级越高；
  • reuseExistingChunk如果a模块引用的模块b已经打包过，再打包时b模块不再进行打包，直接使用;

总结

在优化性能的时候，可以考虑使用代码分割，本文说了解析了一点配置参数，详细配置还请翻阅文档进行学习；

avatar
文章
阅读
粉丝