webpack4之SplitChunksPlugin使用指南

写在前面

前面写了一篇有关webpack4的不完全升级指南以及在webpack3.x迁移的时候遇到的问题，有兴许可以看一下。

0. 参数介绍

先对参数有一个大概的认识，虽然撸了很多遍官方的更新文档，但是还是去参看了一下新的wbepack源码，下面是各种参数及含义：

  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: {
    // ...
  }
  // ...
}

写在后面

webpack更新已经过了很多天了，最近算是把更新的基本都过了一遍，在此记录以便日后查看，理解有问题的地方还请不吝赐教。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈webpack SplitChunksPlugin实用指南

    浅谈webpack SplitChunksPlugin实用指南

    提到前端打包工具,毫无疑问想先到的是webpack.但是前端发展地很快,时不时会有新东西出现,打包工具这边之前也出现parcel和rollup.各种工具的碰撞,相互汲取优点,促进技术的发展. webpack4中支持了零配置的特性,同时对块打包也做了优化, CommonsChunkPlugin 已经被移除了,现在是使用 optimization.splitChunks 代替. 下面就开始介绍splitChunks的内容. 默认情况 首先webpack会根据下述条件自动进行代码块分割: 新代码块可以

  • webpack4之SplitChunksPlugin使用指南

    写在前面 前面写了一篇有关webpack4的不完全升级指南以及在webpack3.x迁移的时候遇到的问题,有兴许可以看一下. 0. 参数介绍 先对参数有一个大概的认识,虽然撸了很多遍官方的更新文档,但是还是去参看了一下新的wbepack源码,下面是各种参数及含义: chunks: 表示显示块的范围,有三个可选值:initial(初始块).async(按需加载块).all(全部块),默认为all; minSize: 表示在压缩前的最小模块大小,默认为0: minChunks: 表示被引用次数,默认

  • 详解webpack4之splitchunksPlugin代码包分拆

    本文讲解的是最近在做的一个多页面项目,结合webpack4的splitChunks进行代码包分拆的过程 项目框架 项目有home和topic两个入口文件,主要包括: react.mobx.antd作为项目的基本框架, echarts和d3(画图)是项目中部分页面用到比较大的组件库 src下的工作的组件和代码 其他的非公共代码. 两个入口文件都用react-loadable做了异步加载 import Loadable from 'react-loadable'; ... const Loadabl

  • webpack 代码分离优化快速指北

    分离代码文件 在此之前,首先要知道经常配置的 output 中有关 filename 和 chunkFilename 的区别:简单来说在 entry 定义的入口文件走的就是 filename 配置项,在入口文件内部引入的通常情况下是 chunk,走 chunkFilename 的配置 所以很多时候分离代码文件就是将不同的 chunk 分离开来,生产环境中有利于浏览器缓存,加快二次访问的速度 代码分离的时候,optimization 中配置的 splitChunks 默认就是 async,默认对异

  • Vue项目从webpack3.x升级webpack4不完全指南

    前段时间,泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本,现在才拉出来记录一下,已备忘之用,也和大家分享一下,以免大家采坑. 原先的环境 项目原先通过Vue-cli 2.9.3 版本构建,原先使用的webpack 3.x版本 首先需要对基础包进行更新(package.json) webpack 更新到4.x版本,泡面这里更新到了4.28.3 更新webpack-dev-server,泡面更新到了3.1.14版本, 安装webpack-cli,泡面安装的是3.

  • 详解webpack4升级指南以及从webpack3.x迁移

    详解webpack4升级指南以及从webpack3.x迁移

    几天前webpack发布了新版本v4.0.0,其中做了很多改动,包括0配置以及移除了CommonsChunkPlugin等.由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本,本文就一个新的vue-cli创建的基于webpack的项目进行迁移. 题外话:不要看0配置是很有噱头,基本是不能满足大部分用户啊的需求,不过加入了更多的默认配置确实也方便了用户,配置相对简单,是一种开箱即用的方式.毕竟之前parcel的0配置确实抢了很多webpack的风头,然后也去弄了一下par

  • 详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南

    正如Vue官方所说,SSR配置适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读.请先移步ssr.vuejs.org了解手工进行SSR配置的基本内容. 从头搭建一个服务端渲染的应用是相当复杂的.如果您有SSR需求,对Webpack及Koa不是很熟悉,请直接使用NUXT.js. 本文所述内容示例在 Vue SSR Koa2 脚手架 : https://github.com/yi-ge/Vue-SSR-Koa2-Scaffold 我们以撰写本文时的最新版:Vue 2,Web

  • 浅谈Webpack4 Tree Shaking 终极优化指南

    几个月前,我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4.我们的主要目标之一是利用 tree-shaking 的优势,即 Webpack 去掉了实际上并没有使用的代码来减少包的大小.现在,tree-shaking 的好处将根据你的代码库而有所不同.由于我们的几个架构决策,我们从公司内部的其他库中提取了大量代码,而我们只使用了其中的一小部分. 我写这篇文章是因为恰当地优化 Webpack 并不简单.一开始我以为这是一种简单的魔法,但后来我花了一个月的时间在网上搜索我遇到

  • webpack3升级到webpack4遇到问题总结

    最近由于项目需要,需要对已有的两个vue项目进行webpack3升级到webpack4,此处记录一下整个升级过程的几个重要步骤,以及遇到的问题和解决方案. 1.更新webpack以及相关联插件,webpack4新增插件webpack-cli npm i -D webpack webpack-cli webpack-dev-server webpack-merge 2.运行npm run dev,报错:Error: webpack.optimize.CommonsChunkPlugin has b

  • webpack4.0 入门实践教程

    webpack 可以看做是模块打包机:他做的事情是,分析你的项目结构,找到 JavaScript 模块以及其他的一些浏览器不能直接运行的扩展语言( Scss . TypeScript 等),将其打包为合适的格式以供浏览器使用 构建就是把源代码转换成发布到线上可执行的 JavaScript .CSS.HTML 代码,包括以下内容: 代码转换 : TypeScript 编译成 JavaScript . SCSS 编译成 CSS 等等 文件优化 :压缩 JavaScript .CSS.HTML 代码,

随机推荐