webpack之Lazy Loading

webpack

 2019/09/27 

应用场景

懒加载就是将不关键的资源延后加载，是一种很好的优化网页或应用的方式。
这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

实现

对于图片来说，先设置图片标签的src属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为src属性，这样图片就会去下载资源，实现了图片懒加载。
懒加载不仅可以用于图片，也可以使用在别的资源上。例如下面这段代码实现click之后再执行异步函数在页面生成文字。

//  利用异步加载的代码，可以实现懒加载
async function getComponent() {
  const { default: _ } = await import(/* webpackChunkName:"lodash"*/'lodash')
  const element = document.createElement('div')
  element.innerHTML = _.join(['a', 'b', 'c'], '***')
  return element
}
document.addEventListener('click', () => {
    getComponent().then(element => {
    document.body.appendChild(element)
    })
  })

原文作者：Jacleklm

原文链接：http://jacleklm.github.io/2019/09/27/webpack%E4%B9%8BLazy%20Loading/

发表日期：September 27th 2019, 9:27:21 am

更新日期：September 17th 2023, 10:00:22 pm

Next Post

提升webpack打包速度的方法
Previous Post

webpack之Code Splitting

CATALOG

1. 应用场景
2. 实现