189 8069 5689

SplitChunksPlugin怎么在webpack4中使用-创新互联

SplitChunksPlugin怎么在webpack4中使用？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

成都创新互联公司长期为上千多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为澜沧企业提供专业的成都网站设计、网站制作，澜沧网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

参数：

  1. chunks: 表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all;

  2. minSize: 表示在压缩前的最小模块大小，默认为0；

  3. minChunks: 表示被引用次数，默认为1；

  4. maxAsyncRequests: 大的按需(异步)加载次数，默认为1；

  5. maxInitialRequests: 大的初始化加载次数，默认为1；

  6. name: 拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；

  7. cacheGroups: 缓存组。

对于缓存组是一个对象，处了可以有上面的chunks、minSize、minChunks、maxAsyncRequests、maxInitialRequests、name外，还有其他的一些参数：

如果不在缓存组中重新赋值，缓存组默认继承上面的选项，但是还有一些参数是必须在缓存组进行配置的。

  1. priority: 表示缓存的优先级；

  2. test: 缓存组的规则，表示符合条件的的放入当前缓存组，值可以是function、boolean、string、RegExp，默认为空；

  3. reuseExistingChunk: 表示可以使用已经存在的块，即如果满足条件的块已经存在就使用已有的，不再创建一个新的块。

1. 基本使用

首先，在新版本的webpack会默认对代码进行拆分，拆分的规则是：

  1. 模块被重复引用或者来自node_modules中的模块

  2. 在压缩前最小为30kb

  3. 在按需加载时，请求数量小于等于5

  4. 在初始化加载时，请求数量小于等于3

小于30kb的模块不值得再单独发送一次请求，在很小的模块的前提下，相比与多次打包，减少请求次数成本要低。

当然也可以不使用默认的配置，比如这样：

new webpack.optimize.SplitChunksPlugin({
  chunks: "all",
  minSize: 20000,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  name: true
)}

上面的代码就表示，在所有代码中，引用模块大小最小为20kb，引用次数最少为1次，按需加载大请求次数为5，初始化加载大请求次数为3的所有模块就行拆分到一个单独的代码块中，name表示代码的名字，设置为true则表示根据模块和缓存组秘钥自动生成。

2. 使用缓存组(Cache Groups)

如果想继续细分代码，可以使用缓存组(Cache Groups)。同样的，缓存组也有默认的配置；缓存组默认将node_modules中的模块拆分带一个叫做vendors的代码块中，将最少重复引用两次的模块放入default中。

这是一段官方里面的代码：

splitChunks: {
  chunks: "async",
  minSize: 30000,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  name: true,
  cacheGroups: {
    default: {
      minChunks: 2,
      priority: -20
      reuseExistingChunk: true,
    },
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10
    }
  }
}

上面是缓存组的默认配置，可以通过default:false禁用默认的缓存组，然后就可以自定义缓存组，将初始化加载时被重复引用的模块进行拆分，就像这样：

cacheGroups: {
  commons: {
    name: "commons",
    chunks: "initial",
    minChunks: 2
  }
}

之后就随心所欲，可以根据具体的需求，创建多个缓存组：

cacheGroups: {
  a: {
    // ...
  },
  b: {
    // ...
  }
  // ...
}

关于SplitChunksPlugin怎么在webpack4中使用问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联成都网站设计公司行业资讯频道了解更多相关知识。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


分享标题：SplitChunksPlugin怎么在webpack4中使用-创新互联
网站链接：http://cdxtjz.cn/article/dcoepo.html

其他资讯