Lazy Loading 懒加载与Chunk

最新推荐文章于 2022-11-28 11:35:45 发布

原创最新推荐文章于 2022-11-28 11:35:45 发布 · 783 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了懒加载在前端开发中的应用，特别是在使用Webpack时如何通过异步加载组件实现模块的延迟加载，从而优化页面加载速度。

我们接着上文例子继续写，因为lazy loading , chunk 是之前就有遇到的。

我们删除上文中src/test.js 文件。

我们放开index.js 中引入并使用lodash 的注释代码，如下

// sync
import _ from 'lodash'

var element = document.createElement('div');
element.innerHTML = _.join(['h','e'], '**');
document.body.appendChild(element);

// async
function getComponent () {
  return import(/* webpackChunkName:"lodash" */ 'lodash').then(
    ({default: _}) => {
      var element = document.createElement('div');
      element.innerHTML = _.join(['h','e'], '**');
      return  element;
    }
  )
}

getComponent().then(element => {
  document.body.appendChild(element);
})

可以看到前面是同步引入lodash 的方式并在页面挂载lodash 拼接的字符串，后面是异步的方式加载组件来加载lodash。他们的功能都是相同的，而且前面的方式更加简洁，那么为什么还存在异步加载组件的方式呢。

这是因为，异步加载组件的方式，可以实现懒加载。

我们做一个改进，当然先注释掉同步加载代码。目前是，只要页面一运行，就会去加载lodash，然后生成一个元素挂载在页面上。我们将这个加载延迟一下。代码如下。

function getComponent () {
  return import(/* webpackChunkName:"lodash" */ 'lodash').then(
    ({default: _}) => {
      var element = document.createElement('div');
      element.innerHTML = _.join(['h','e'], '**');
      return  element;
    }
  )
}

document.addEventListener('click', () => {
  getComponent().then(element => {
    document.body.appendChild(element);
  })
})

运行打包命令，如下。生成了vendors~lodash.js 文件。

我们在浏览器中打开项目的html 文件。

就会发现，当页面加载时，只会请求并加载下面的文件，而当点击页面时，才会去请求加载 vendors~lodash.js 。这就是模块懒加载。

借助懒加载，我们可以使页面加载更快。当然。懒加载并不是webpack 本身的概念，ECMAScript 中提出了实验性质的 import（）用于实现懒加载。webpack 能识别出import() ，并对它所引入的代码做分割。

同时，我们可以使用async await 语法来写异步import（），如下。

async function getComponent () {
  const {default: _} = await import(/* webpackChunkName:"lodash" */ 'lodash')
  const element = document.createElement('div');
  element.innerHTML = _.join(['h','e'], '**');
  return  element;
}

那么 Chunk 是什么。

比如，我们在打包过程中将index.js 分割成两个js 文件，这两个js 文件都是chunk . 在webpack 的打包过程中，生成的js 文件都是一个chunk.

我们翻到之前在webpack.config.js 中的splitChunks配置如下。

  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  },

其中有一项splitChunks.minChunks, 之前，我们的解释是“一个模块至少用到多少次的时候才会对其进行分割” 。当打包生成的chunks 中有多少用到了某个chunk ，当数量足够时，会对这个代码进行分割。