webpack指南（二）code spliting+懒加载

code spliting 把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。

代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大缩减加载时间。

首先，看一组概念。参考：https://www.jianshu.com/p/a1ccd6d1b4ba

chunk：块，指若干个js module的集合
bundle：形式上是块的集合，意义是代表一个可以运行的整体
chunk和bundle：what-are-module-chunk-and-bundle-in-webpack
比较难说明，搜的基本都是个人总结，官方描述也比较抽象。
一个js文件就是一个模块，若干个js模块会打包成一个总的js文件，这个js文件称作bundle。但如果是多页面应用，往往会安排为一个html对应一个bundle，那么两个html的bundle之间重复的模块就是重复代码。此时我们会把这两个bundle重复的模块抽出来，称为common chunk，余下的两部分直接称作两个chunk。即此时一共有3个chunk，但依然只有两个bundle。
单页面应用中异步加载，或者单纯想分离出不变的第三方库，均可采用该手段进行优化。

有三种常用的代码分离方法：

入口起点：使用 entry 配置手动地分离代码（多页面应用；存在重复引用）。
```
entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },
```
another-module.js与index.js中，都存在lodash引用。
防止重复：使用 SplitChunksPlugin 去重和分离 chunk。（使用SplitChunksPlugin不需要安装任何依赖，只需在配置中添加 optimization 属性）

当满足以下条件时，来自相同块chunk和缓存组的模块将形成一个新块。

minSize （默认值：30000）块的最小大小
minChunks （默认值：1）在拆分之前共享模块的最小块数（a. 可以是来自node_modules b. 在两个或两个以上的引入调用共享）
maxInitialRequests （默认值为3）入口点的最大并行请求数
maxAsyncRequests （默认为5）按需加载时并行请求的最大数量

官网对splitChunks给出的默认配置如下：

optimization:{
  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
        }
    }
  }
}

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

3. 动态导入：通过模块的内联函数调用来分离代码。

在webpack.prod.js中添加：

output:{
    chunkFilename: '[name].bundle.js'   // 非入口chunk的文件名
}

在index.js中使用动态加载的方式加载lodash

function component() {
    return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
        let element = document.createElement('div');

        element.innerHTML = _.join(['hello','webpack,', cube(5)],' ');
        element.classList.add('hello');
    
        let button = document.createElement('button');
        button.innerHTML = 'click me and check the console!';
    
        button.onclick = myPrint;
    
        element.appendChild(button);
    
        return element;
    }).catch(err => 'an error occured while loading the component');

}

// 动态加载
component().then(element => {
    document.body.appendChild(element);
    if (module.hot) { //告诉 webpack 接受热替换的模块
        module.hot.accept('./print.js', () => {
            console.log('Accepting the updated printMe module!');
            document.body.removeChild(element); //删掉旧的element
            element = component(); //重新渲染页面后，component 更新 click 事件处理
            document.body.appendChild(element); //重新插入到网页中
        })
    }
})

由此，lodash会单独形成一个chunk

在注释中使用了 webpackChunkName。这样做会导致我们的 bundle 被命名为 lodash.bundle.js ，而不是 [id].bundle.js.

由于 import() 会返回一个 promise，因此它可以和 async 函数一起使用。但是，需要使用像 Babel 这样的预处理器和Syntax Dynamic Import Babel Plugin。

async function component() {
    let element = document.createElement('div');

    const _ = await import(/* webpackChunkName: "lodash" */ 'lodash')
    element.innerHTML = _.join(['hello','webpack,', cube(5)],' ');
    element.classList.add('hello');

    let button = document.createElement('button');
    button.innerHTML = 'click me and check the console!';    
    button.onclick = myPrint;
        
    element.appendChild(button);
    return element;
}

懒加载 当发生用户交互时，再加载被分离的块。

在上述code spliting代码中，虽然lodash被单独分离成一个chunk。但分离后lodash加载与用户交互没有任何联系，换句话说，每次加载页面时都会去请求它。

async function component() {
    let element = document.createElement('div');

    let button = document.createElement('button');
    button.innerHTML = 'click me and check the console!';    
    // 懒加载
    button.onclick = e => import(/* webpackChunkName: "print" */ './print.js').then(module => {
        const print = module.default;
        print();
    })
        
    element.appendChild(button);
    return element;
}

点击后，

注意：当调用 ES6 模块的 import() 方法引入模块时，必须指向module.default ，因为它才是 promise 被处理后返回的实际的 module 对象。

Vue懒加载: https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/

React懒加载： https://reacttraining.com/react-router/web/guides/code-splitting

posted @ 2020-02-02 17:36 cecelia 阅读(450) 评论(0) 编辑收藏举报

刷新页面返回顶部

cecelia

webpack指南（二）code spliting+懒加载

公告