Webpack系列——代码分离(Code Splitting)

2023-12-15 10:09:15

代码分离(Code Splitting)

// index.js
import _ from 'lodash';
const ele = document.createElement('div');
ele.innerHTML = _.join(['Code', 'Splitting'], '---');
document.body.appendChild(ele);

以上代码中，在开头同步引入了 lodash ，这没什么问题，但是一旦这个 index.js 文件很大，只要 index.js 中代码一变化，那么整个 index.js 就会重新加载，这是，lodash 又会被重新引入。简而言之，每次修改 index.js ，就会导致一次 lodash 的引入，这是一种浪费。

Entry 入口配置

将固定复用的代码（以 lodash 为例）卸载一个 js 文件中，然后放在 entry 入口配置里。

注意：lodash 和 index 的先后顺序

// lodash.js
import _ from 'lodash'
window._ = _


// index.js (主文件)
const ele = document.createElement('div')
ele.innerHTML = _.join(['Code', 'Splitting'], '---')
document.body.appendChild(ele)

webpack.config.js

const path = require('path')
module.exports = {
    mode: 'development',
    entry: {
        lodash: './src/lodash.js', // 注意顺序，lodash 写在前面
        index: './src/index.js' // 这样 index.js 的代码才能用到 lodash
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
    ...
}

这样，main.js 就被拆分为 lodash.js 和 index.js。

当首次加载页面时，lodash.js 被加载了一份（1.5M), index.js 被加载了一份(44.2kB)。
当修改业务代码时，只会重新加载 index.js (44.2kB)，而 lodash.js的那一份(1.5MB)则会被浏览器缓存，不会重新被加载。

这是手动分离代码的一种方式，但是还是分麻烦。

Code Splitting

1.默认配置

webpack 提供了代码分离的特性，默认是将 异步代码 按照以下方式进行代码分离的：

module.exports = {
    ...
    optimization: {
        splitChunks: {
            chunks: 'async', // 同步 or 异步，这里是异步
            minSize: 20000, // 如果模块大小小于这个值，则不会被分割 20k
            minRemainingSize: 0, // 最小可保存大小，开发模式下为0，其他情况下等于minSize,一般不用手动配置
            minChunks: 1, // 如果模块被引用次数小于这个值，则不会被分割
            maxAsyncRequests: 30, // 异步模块，一次最佳被加载的次数
            maxInitialRequests: 30, // 入口模块最多被加载的次数
            enforceSizeThreshold: 50000, // 强制分割的大小阈值 50k
            cacheGroups: { // 缓存组
                defaultVendors: { // 打包第三方库
                    test: /[\\/]node_modules[\\/]/, // 正则匹配第三方库文件
                    priority: -10, // 优先级
                    // 如果一个模块已经被打包过了，那么这个模块页不会被打包了
                    reuseExistingChunk: true, 
                },
                default: {
                    minChunks: 2, // 被超过两个模块引用，才会被打包
                    priority: -20, // 优先级
                    reuseExistingChunk: true
                }
            }
        }
    }
}

2.同步代码的处理

上述的处理显然对同步代码是无能为力的，于是我们这样设置：将 optimization.splitChunks.chunks的值设置为 all ，它表示：不管同步还是异步，都会进行代码分离，但是请注意，如果你的共用模块不属于第三方库（也就是不能在 node_modules 中找到），而是属于自己写的一些代码模块，这些代码就会按照 cacheGroups下的 default 配置打包。如果属于第三方库，就按照 cacheGroups 下的default Vendors 配置打包。

module.exports = {
    ...
    optimization: {
        splitChunks: {
            chunks: 'all', // 有效值为 all，async 和 initial，
            minSize: 1000, // 自己设置最小分割大小
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority, -10,
                    reuseExistingChunk: true,
                    filename: 'vendors.js' // 自定义打包后的文件名
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true,
                    filename: 'common.js'
                }
            }
        }
    }
}

这样，业务代码和第三方库或自己的模块代码就会被分开，效果与我们手动去分割代码是一样的。

如果打包后，发现自己写的模块没有被分割出来，说明自己的模块大小不符合分割的条件（minSize），或不符合缓存组中的条件（minChunks）... ...

3.异步代码的处理

对于异步代码， webpack 默认就开启对异步代码进行分离。

因此，我们并不需要做什么特殊的处理，它就会帮你分离好。

通过动态引入（import()）的代码就是典型的异步代码，它会在打包后生成一个 chunk：

// index.js
function getComponent() {
    return import(/* webpackChunkName: 'lodash' */ 'lodash').then(({ default: _ }) => {
        const ele = document.createElement('div')
        ele.innerHTML = _.join(['Code', 'Splitting'], '---')
        return ele
    })
}
// 也可以使用异步函数引入
// async function getComponent() {
//     const { default: _ } = await import(/* webpackChunkName: 'lodash' */ 'lodash')
//     const ele = document.createElement('div')
//     ele.innerHTML = _.join(['Code', 'Splitting'], '---')
//     return ele
// }
document.addEventListener('click', () => {
    getComponent().then(ele => {
        document.body.appendChild(ele)
    })
})

注意： /* webpackChunkName: 'lodash' */ 是一个魔法注释，可以自定义分离文件（chunk）的名称，chunk就是被分离的代码。

这些动态引入的代码，在首次加载时并不会被引入。（此时 lodash.js 并没有被引入）

只有点击触发响应的时间（点击了页面，触发 getComponent 函数），这时才引入了 lodash.js。

在一定程度上，动态引入的方式是优于同步引入的，上面动态引入有着懒加载（lazy loading）的效果，使用异步代码，代码的利用率和页面性能会得到提升，这也就是为什么 webpack 默认对异步代码进行分离的原因。

码农公寓