代码均放在 git仓库
webpack 4给我们带来了一些改变。包括更快的打包速度，引入了splitchunksplugin插件来取代（之前版本里的）commonschunksplugin插件。在这篇文章中，你将学习如何分割你的输出代码，从而提升我们应用的性能。
splitchunks插件( webpack 4.x以前使用commonschunkplugin )允许我们将公共依赖项提取到现有的 entry chunk 或全新的代码块中。
代码分割的理念
首先搞明白： webpack里的代码分割是个什么鬼？ 它允许你将一个文件分割成多个文件。如果使用的好，它能大幅提升你的应用的性能。其原因是基于浏览器会缓存你的代码这一事实。每当你对某一文件做点改变，访问你站点的人们就要重新下载它。然而依赖却很少变动。如果你将（这些依赖）分离成单独的文件，访问者就无需多次重复下载它们了。
使用webpack生成一个或多个包含你源代码最终版本的“打包好的文件”（），（概念上我们当作）它们由（一个一个的）组成。
首先 webpack 总共提供了三种办法来实现 code splitting，如下：
这里我们姑且只讨论使用 splitchunks 抽取公有代码。
splitchunks配置
在src目录下创建三个文件pagea.js、pageb.js和pagec.js。代码详情见文章开头git仓库。
我要评论
// src/pagea.js
var react = require('react');
var reactdom = require('react-dom');
var utility1 = require('../utils/utility1');
var utility2 = require('../utils/utility2');
new vue();
module.exports = "pagea";
// src/pageb.js
var react = require('react');
var reactdom = require('react-dom');
var utility2 = require('../utils/utility2');
var utility3 = require('../utils/utility3');
module.exports = "pageb";
// src/pagec.js
var react = require('react');
var reactdom = require('react-dom');
var utility2 = require('../utils/utility2');
var utility3 = require('../utils/utility3');
module.exports = "pagec";
入口文件 && 出口文件
entry: {
pagea: "./src/pagea", // 引用utility1.js utility2.js
pageb: "./src/pageb", // 引用utility2.js utility3.js
pagec: "./src/pagec", // 引用utility2.js utility3.js
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].[hash:8].bundle.js"
},
配置optimization
首先我们配置optimization如下：
optimization: {
splitchunks: {
chunks: "all",
},
执行npm run build打包命令之后，查看dist目录
可以发现，打包出来的除了三个page文件，还存在一个vendors~pagea~pageb~pagec.[hash].bundle.js文件（ 此文件中保存了pagea、pageb、pagec和node_modules中共有的size大于30kb的文件 ）。事实上这全靠了配置中本身默认固有一个cachegroups的配置项：
splitchunks: {
chunks: "all",
cachegroups: {
vendors: {
test: /[\\/]node_modules[\\/]/, // 匹配node_modules目录下的文件
priority: -10 // 优先级配置项
},
default: {
minchunks: 2,
priority: -20, // 优先级配置项
reuseexistingchunk: true
}
}
}
在默认设置中，会将 node_mudules 文件夹中的模块打包进一个叫 vendors的bundle中，所有引用超过两次的模块分配到 default bundle 中。更可以通过 priority 来设置优先级。
参数说明如下：
值得注意的是，如果没有修改minsize属性的话，而且被公用的代码（假设是utilities.js）size小于30kb的话，它就不会分割成一个单独的文件。在真实情形下，这是合理的，因为（如分割）并不能带来性能确实的提升，反而使得浏览器多了一次对utilities.js的请求，而这个utilities.js又是如此之小（不划算）。
缓存组会继承splitchunks的配置，但是 test、priorty和reuseexistingchunk只能用于配置缓存组 。cachegroups是一个对象，按上述介绍的键值对方式来配置即可，值代表对应的选项。除此之外，所有上面列出的选择都是可以用在缓存组里的：chunks, minsize, minchunks, maxasyncrequests, maxinitialrequests, name。可以通过optimization.splitchunks.cachegroups.default: false禁用default缓存组。 默认缓存组的优先级(priotity)是负数，因此所有自定义缓存组都可以有比它更高优先级（译注：更高优先级的缓存组可以优先打包所选择的模块）（默认自定义缓存组优先级为0）
现在我们再重新来看一下pagea、pageb、pagec三个js文件，这三个文件中都引入了utility2.js文件，但是此文件size很明显小于30kb，所以这部分公用代码并没有分割出来。如果想要分割出来很简单，只需要：
optimization: {
splitchunks: {
chunks: "all",
minsize: 0
},
执行npm run build打包命令之后，查看dist目录
显然多了一个pagea~pageb~pagec.[hash].bundle.js文件。查看文件可得知此文件中存储了utility2.js中的代码。如下图所示（借助于webpack-bundle-analyzer插件，详情文章末尾附录）。
上图可以看出，react相关代码均放在了vendors~pagea~pageb~pagec.[hash].bundle.js文件中，如果我们想要抽离出react代码，应该怎么做呐？
splitchunks: {
chunks: "all",
cachegroups: {
commons: {
chunks: "initial",
minchunks: 2,
name: "commons",
maxinitialrequests: 5,
minsize: 0, // 默认是30kb，minsize设置为0之后
// 多次引用的utility1.js和utility2.js会被压缩到commons中
},
reactbase: {
test: (module) => {
return /react|redux|prop-types/.test(module.context);
}, // 直接使用 test 来做路径匹配，抽离react相关代码
chunks: "initial",
name: "reactbase",
priority: 10,
}
}
},
run build之后如下图所示。
看似非常完美，但是reactbase文件中竟然包含了node_modules，神奇的问题？室友都睡觉了，这键盘声影响不好，明天接着看。
附录
我们再安装一个 webpack-bundle-analyzer，这个插件会清晰的展示出打包后的各个bundle所依赖的模块：
npm i webpack-bundle-analyzer -d
引入：
const bundleanalyzerplugin = require('webpack-bundle-analyzer').bundleanalyzerplugin
使用，在plugins数组中添加即可：
new bundleanalyzerplugin()
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Web编程入门 2.1 jQuery Validate方法 以及批量验证的修改方法
js事件委托、Cookie缓存、转码解码、严格模式以及异常处理
JavaScript——易班优课YOOC课群在线测试自动答题解决方案(二十)整理维护
网友评论