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

1

目录

上节: 代码分割(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代码分隔


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...