webpack4 之 splitChunks

最新推荐文章于 2024-08-06 04:15:36 发布

weixin_39762508

最新推荐文章于 2024-08-06 04:15:36 发布

阅读量956

点赞数

文章标签： javascript webpack 前端

本文链接：https://blog.csdn.net/weixin_39762508/article/details/128533271

版权

本文详细介绍了webpack4中的SplitChunks插件，用于提取公共代码，防止重复打包和优化性能。分析了不同splitChunks模式（async, initial, all）下的打包结果，强调了配置参数如minChunks、maxAsyncRequests、maxInitialRequests、minSize、maxSize的重要性，并给出了优化建议，包括第三方库的独立分包和路由懒加载。" 23472073,2540757,提升VTK体绘制速度：GPU加速与vtkSmartVolumeMapper,"['可视化', 'C++', 'GPU编程', 'vtk', '医学图像处理']

摘要由CSDN通过智能技术生成

webpack4 之 splitChunks

简介

主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。

SplitChunks 插件的作用就是通过配置让 Webpack 去帮你提取公共代码

chunks

webpack构建静态资源。左侧的资源通过webpack后，就都转换成web浏览器能识别的资源。
以下图的webpack为划分点，左边的资源就是moudle，右边的资源就是bundle。
为了优化性能，比如快速打开首屏，利用缓存等，我们需要对过大的bundle进行拆分，对于拆分出来的东西，我们叫它chunk
在这里插入图片描述

特点

经过webpack打包后，每个异步引入的文件也就是我们懒加载的页面都会对应一个 async chunk，某组件或文件在被不同的页面引用的情况下，会分别被这些 async chunk 合并进去，这就导致同一个组件模块或者文件被打包进多个页面中，造成了不必要的资源加载。这个问题可以通过splitChunks配置解决

webpack4有一个splitChunks默认配置，开箱即用

基本配置参数如下:

 optimization: {
   
   splitChunks: {
   
     
       /**用来指定哪类 chunks 需要做拆包优化**/
      // 异步引入的模块均会被拆分出来（webpack默认规则如此）
      // initial表示只考虑入口文件同步引入的代码进行拆分，async表示只拆入口文件异步引入的文件内的同步引入模块进行拆分，而all表示以上两者都加入拆分范畴。
      chunk: 'all', 
      
      // 大小超过30kb的模块才会被提取
       minSize: 3000