webpack4系列教程（六）：使用SplitChunksPlugin分割代码

golden_hamster 发布于2019-08-02 14:06 / 1258人阅读

摘要：在默认情况下，仅仅影响按需加载的代码块，因为更改初始块会影响文件应包含的脚本标记以运行项目。属性用来选择分割哪些代码块，可选值有所有代码块，按需加载的代码块，初始化代码块。

1. SplitChunksPlugin的概念

起初，chunks(代码块)和导入他们中的模块通过webpack内部的父子关系图连接.在webpack3中，通过CommonsChunkPlugin来避免他们之间的依赖重复。而在webpack4中CommonsChunkPlugin被移除，取而代之的是 optimization.splitChunks 和 optimization.runtimeChunk 配置项，下面展示它们将如何工作。

在默认情况下，SplitChunksPlugin 仅仅影响按需加载的代码块，因为更改初始块会影响HTML文件应包含的脚本标记以运行项目。

webpack将根据以下条件自动拆分代码块：

会被共享的代码块或者 node_mudules 文件夹中的代码块

体积大于30KB的代码块（在gz压缩前）

按需加载代码块时的并行请求数量不超过5个

加载初始页面时的并行请求数量不超过3个

举例1：

</>复制代码 
// index.js
// 动态加载 a.js
import("./a")

</>复制代码 
// a.js
import "vue"
// ...

打包之后的结果会创建一个包含 vue 的独立代码块，当包含 a.js 的原始代码块被调用时，这个独立代码块会并行请求进来。

原因：

vue 来自 node_modules 文件夹

vue 体积超过30KB

导入调用时的并行请求数为2

不影响页面初始加载

我们这样做的原因是因为，vue代码并不像你的业务代码那样经常变动，把它多带带提取出来就可以和你的业务代码分开缓存，极大的提高效率。

举例2：

</>复制代码 
// entry.js
import("./a");
import("./b");

</>复制代码 
// a.js
import "./helpers"; // helpers is 40kb in size
// ...

</>复制代码 
// b.js
import "./helpers";
import "./more-helpers"; // more-helpers is also 40kb in size
// ...

结果：将创建一个多带带的块，其中包含./helpers它的所有依赖项。在导入调用时，此块与原始块并行加载。

原因：

条件1：helpers 是共享块

条件2：helpers大于30kb

条件3：导入调用的并行请求数为2

条件4：不影响初始页面加载时的请求

2. SplitChunksPlugin的默认配置

以下是SplitChunksPlugin的默认配置：

</>复制代码 
splitChunks: {
    chunks: "async",
    minSize: 30000, // 模块的最小体积
    minChunks: 1, // 模块的最小被引用次数
    maxAsyncRequests: 5, // 按需加载的最大并行请求数
    maxInitialRequests: 3, // 一个入口最大并行请求数
    automaticNameDelimiter: "~", // 文件名的连接符
    name: true,
    cacheGroups: { // 缓存组
        vendors: {
            test: /[/]node_modules[/]/,
            priority: -10
        },
        default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

缓存组：

缓存组因该是SplitChunksPlugin中最有趣的功能了。在默认设置中，会将 node_mudules 文件夹中的模块打包进一个叫 vendors的bundle中，所有引用超过两次的模块分配到 default bundle 中。更可以通过 priority 来设置优先级。

chunks：

chunks属性用来选择分割哪些代码块，可选值有："all"（所有代码块），"async"（按需加载的代码块），"initial"（初始化代码块）。

3. 在项目中添加SplitChunksPlugin

为了方便演示，我们先安装两个类库： lodash 和 axios，

</>复制代码 
npm i lodash axios -S

修改 main.js，引入 lodash 和axios 并调用相应方法：

</>复制代码 
import Modal from "./components/modal/modal"
import "./assets/style/common.less"
import _ from "lodash"
import axios from "axios"
const App = function () {
  let div = document.createElement("div")
  div.setAttribute("id", "app")
  document.body.appendChild(div)
  let dom = document.getElementById("app")
  let modal = new Modal()
  dom.innerHTML = modal.template({
    title: "标题",
    content: "内容",
    footer: "底部"
  })
}
const app = new App()
console.log(_.camelCase("Foo Bar"))
axios.get("aaa")

使用SplitChunksPlugin不需要安装任何依赖，只需在 webpack.config.js 中的 config对象添加 optimization 属性：

</>复制代码 
optimization: {
    splitChunks: {
      chunks: "initial",
      automaticNameDelimiter: ".",
      cacheGroups: {
        vendors: {
          test: /[/]node_modules[/]/,
          priority: 1
        }
      }
    },
    runtimeChunk: {
      name: entrypoint => `manifest.${entrypoint.name}`
    }
  }

配置 runtimeChunk 会给每个入口添加一个只包含runtime的额外的代码块，name 的值也可以是字符串，不过这样就会给每个入口添加相同的 runtime，配置为函数时，返回当前的entry对象，即可分入口设置不同的runtime。

我们再安装一个 webpack-bundle-analyzer，这个插件会清晰的展示出打包后的各个bundle所依赖的模块：

</>复制代码 
npm i webpack-bundle-analyzer -D

引入：

</>复制代码 
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin

使用，在plugins数组中添加即可：

</>复制代码 
new BundleAnalyzerPlugin()

打包之后：

各个模块依赖清晰可见，打开 dist/index.html可见我们的代码顺利运行：

以上就是SplitChunksPlugin的基本用法，更多高级的配置大家可以继续钻研（比如多入口应用）。

云服务器 GPU云服务器 webpack4教程 linux系列教程云服务器建站教程系列 SplitChunksPlugin

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53576.html

webpack4系列教程（六）：使用SplitChunksPlugin分割代码

摘要：在默认情况下，仅仅影响按需加载的代码块，因为更改初始块会影响文件应包含的脚本标记以运行项目。属性用来选择分割哪些代码块，可选值有所有代码块，按需加载的代码块，初始化代码块。 1. SplitChunksPlugin的概念起初，chunks(代码块)和导入他们中的模块通过webpack内部的父子关系图连接.在webpack3中，通过CommonsChunkPlugin来避免他们之间的依...

cocopeak 2019-08-23 14:42 评论0 收藏0
webpack4系列教程（十）：总结

摘要：传送门系列教程一初识系列教程二创建项目，打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境在前端开发日益复杂的今天，我们需要一个工具来帮助我们管理项目资源，打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音，我的博文只...

hqman 2019-08-26 13:29 评论0 收藏0
webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack4 系列教程(六): 处理SCSS

摘要：只需要在处理的配置上增加编译的即可。了解更多处理的内容本节课源码所有课程源码教程所示图片使用的是仓库图片，网速过慢的朋友请移步原文地址系列教程六处理。根据规则放在最后的首先被执行。这节课讲解webpack4中处理scss。只需要在处理css的配置上增加编译scss的 LOADER 即可。了解更多处理css的内容 >>> >>> 本节课源码 >>> 所有课程源码教程所示图片使用的是...

马龙驹 2019-08-23 11:33 评论0 收藏0
webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

摘要：本节课讲解打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过配置来实现的，而是通过的写法和内置函数实现的。个人网站原文链接系列教程四单页面解决方案代码分割和懒加载本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过webpack配置来实现的，而是通过...

jackwang 2019-08-26 12:14 评论0 收藏0