webpack4.29.x成神之路(十八) 懒加载

 阅读约 3 分钟

目录

上节: 代码分割(code spliting)下

上节目录如下:

clipboard.png

其实在代码分割时已经用过懒加载了,src/index.js内容如下:

function getComponent() {
  const element = document.createElement('div');
  return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
    const element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
  }).catch(error => 'An error occurred while loading the component');
}


// 按需加载,当点击了页面,才会引入lodash,也是单页应用路由懒加载的实现原理
window.addEventListener('click', function(){
 getComponent().then(component => {
    document.body.appendChild(component);
  })
});

npm run build看生成的文件:

clipboard.png
这三个文件将被用于浏览器,现在运行index.html打开f12:

clipboard.png

如果不点击页面,就不会加载lodash文件,现在点击一下页面:

clipboard.png

页面上出现hello webpack并且加载了lodash文件,这就是懒加载(按需加载 | 异步加载)

下节:css代码分隔

阅读 544更新于 2019-05-23

推荐阅读
开水煮前端
用户专栏

带你装逼带你飞

16 人关注
35 篇文章
专栏主页
目录