简介:代码分割是webpack最大的一个特点,通过这个特点可以将你的代码切割进多个bundles里面,从而从而可以进行按需加载或者并行加载,可以实现更小的bundle和控制资源加载的优先级。

在说代码分割之前,我们先来了解几个概念:

1、bundles:bundles是指webpack打包后文件的统称,单一入口打包出来就只有一个文件,图片,字体文件等其他格式的文件也会被打包进这个bundle文件以base64的形式存在。但是实际开发中我们往往不会这么做,这样会打包出来一个很大的js文件,缺点不必多说,首先是第一次加载时会将所有资源都加载进来,造成首次加载白屏时间过长,第二是无法利用浏览器的并行加载,使加载时间过长,第三是会加载一些可能用不上的资源,造成带宽浪费。

2、chunk:chunk的意思是代码块,一个bundle由一个或者多个chunk组成,一个chunk由一个或多个module组成,chunk是进行代码切割的基础。对于bundle与chunk的之间的关系,webpack打包后的结果拆分成多个代码块,我们称之为chunk,这些chunk是bundles中的一员,因此也可以称之为bundle,就像有一瓶水,我们把它倒进几个杯子,一瓶水就相当于这里的bundles,一杯水就相当于chunk。

3、module:模块,我觉得这与我们项目中架构的模块有所不同,webpack中的模块即文件,每个文件都被看做一个模块。打个比方,假如我们有一个登录模块,里面包含了js,css,img等,在抽象概念中,我们将这些文件抽象地统称为一个模块,即登录模块,而webpack眼中则不同,它是一个文件就是一个模块,即以物理文件的形式划分模块。模块是进行代码分割的最小单位,也就说,我们不能对一个moudle进行更加颗粒化分割,即使这个文件很大。打个比方,现在有一个第三方库,这个库有1M,我们不可能将这个库分割成两个512KB的bundle。当然这得看库的设计者怎么设计打包后的文件了,如果此库被打包成一个文件,我们是无法分割的,比如jquery。如果像是element-ui,库本身对每个组件进行了单独的打包,并不是将所有组件打包进一个文件,所以我们可以进行按需加载。当然对于一些单个较大的文件,我们还有其它优化方式,比如混淆压缩,tree-shaking等。

webpack中代码分割的方式,通常有如下三种:

1、Entry
Points:通过配置入口文件来进行分割,这是最简单和最直接的方式,但是这种方式有一定缺点,可能造成代码重复打包,本文讨论的是另一种方式,本文不做讨论。

2、Prevent Duplication: 使用splitChunksPlugin来进行公共代码提取。

3、Dynamic Imports:通过动态代码加载来分割代码,使用import()方法。

调用import() 之处,被作为分离的模块起点,意思是,被请求的模块和它引用的所有子模块,会分离到一个单独的 chunk
中。import方法依赖于Promise,如果需要在低版本浏览器使用,需要进行polyfill。

import的使用
//a.js import('./b.js').then(b => { //doSomething })
import 规范不允许控制模块的名称或其他属性,因为 "chunks" 只是 webpack
中的一个概念,但是我们可以通过注释接收一些特殊的参数,而无须破坏规定:

webpackChunkName:手动指定模块的名称

webpackMode:指定webpack以什么模式解析动态导入

* lazy:默认值,为每个import()导入的模块生成一个可延迟加载的chunk
*
lazy-once:生成N个可以延迟加载的chunk,这个模式只能用于部分动态语句中有意义,比如import(`./util/${tool}.js`),webpack会将util下的每个js文件分别打包成一个单独的chunk。
//index.js let util = 'a' import(`./util/${util}.js`).then(res => {})
//util/a.js export function add() { console.log('add') } //util/b.js export
const arr = [1, 2, 3]
打包后的目录结构如下

我们可以看到,除了生成一个主bundle(index.js),还生成了1.js和2.js,分别对应a.js和b.js的chunk。

*
eager:这种模式不会生成额外的chunk,所有模块都被当前chunk引入,不会有额外的网络请求。和静态导入相对比,在调用模块之前,该模块不会被执行。(静态导入第一回执行模块代码,ES
Module属于静态导入,commonjs的require属于动态导入)
*
weak:尝试加载模块,如果该模块函数已经以其他方式加载(即,另一个 chunk 导入过此模块,或包含模块的脚本被加载)。仍然会返回 Promise,但是只有在客户端上已经有该 chunk 时才成功解析。如果该模块不可用,Promise 将会是 rejected 状态,并且网络请求永远不会执行。当需要的 chunks 始终在(嵌入在页面中的)初始请求中手动提供,而不是在应用程序导航在最初没有提供的模块导入的情况触发,这对于通用渲染(SSR)是非常有用的。(这个还不没使用过)
注意事项:

* import()不支持完全动态语句,例如import(util),因为webpack
至少需要一些文件的路径信息,而util可能是任何一个路径,webpack不可能将所有模块都打包出来一个chunk。
*
一般我们使用import()动态导入的模块,就不要再在其他模块静态引入此模块了,因为webpack分割chunk时,模块会被打包进静态导入它的chunk中,这样会造成无法分割chunk或者代码重复打包。
//index.js import('./util/a') import('./util/b') //util/a.js import { arr }
from './b' export function add() { console.log('add' + arr) } //util/b.js
export const arr = [1, 2, 3]
上面代码打包结果:

乍一看,发现并没问题,但是当我们打开打包后的文件,b模块被打包进了1.js,也就是a模块拆分出来的chunk里面
//1.js ;(window['webpackJsonp'] = window['webpackJsonp'] || []).push([ [1, 2],
[ , function(module, __webpack_exports__, __webpack_require__) { 'use strict'
__webpack_require__.r(__webpack_exports__) /* harmony export (binding) */
__webpack_require__.d(__webpack_exports__, 'arr', function() { return arr })
const arr = [1, 2, 3] }, function(module, __webpack_exports__,
__webpack_require__) { 'use strict' __webpack_require__.r(__webpack_exports__)
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__,
'add', function() { return add }) /* harmony import */ var
_b__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1) function add() {
console.log('add' + _b__WEBPACK_IMPORTED_MODULE_0__['arr']) } } ] ])
然后我们查看2.js
//2.js ;(window['webpackJsonp'] = window['webpackJsonp'] || []).push([ [2], [
, function(module, __webpack_exports__, __webpack_require__) { 'use strict'
__webpack_require__.r(__webpack_exports__) /* harmony export (binding) */
__webpack_require__.d(__webpack_exports__, 'arr', function() { return arr })
const arr = [1, 2, 3] } ] ])
然后我们发现2.js就是b模块,这样b模块就被重复打包了。

再来看另一种情况
//index.js import { add } from './util/a' import { arr } from './util/b' add()
//util/a.js export function add() { console.log('add' + arr) } import('./b')
//util/b.js export const arr = [1, 2, 3]
此时打包结果如下,并没有生成额外的chunk。

总结:webpack在处理模块时,从入口文件开始,如果遇到静态导入的模块,则打包进当前chunk,如果遇到动态导入,则判断当前chunk是否已经包含此模块,如果已经包含,则不会生成额外的chunk,如果没有则生成新的chunk。在处理静态导入时,不管有没有此模块的chunk,都会将动态模块打包进当前chunk。

*
关于webpackChunkName,默认使用自增长得chunkId,如果多个模块使用import()动态引入此模块,其chunk名按照深度遍历优先的module命名来,如果最深的那层没有指定,则为第二深的,依次类推,都没有指定则使用自增id。
 

技术
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信