前言

懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。

这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

在代码分离（动态导入）例子的基础上，进一步做些调整来说明这个概念。那里的代码确实会在脚本运行的时候产生一个分离的代码块 1.bundle.js ，在技术概念上“懒加载”它。**问题是加载这个包并不需要用户的交互，即每次加载页面的时候都会请求它。**这样做并没有对我们有很多帮助，还会对性能产生负面影响。

示例

现在增加一个交互，当用户点击按钮的时候用 console 打印一些文字。这时候会等到第一次交互时再加载那个代码块。

print.js

export default () => {
  console.log("打印一些字");
}

main.js

function component(){
    var el=document.createElement('div');
    var btn=document.createElement('button');
    btn.innerHTML="打印"
    el.appendChild(btn)
    btn.onclick=e=>import('./print').then(module=>{
        var print=module.default;//获取模块默认输出的函数
        print()
    })
    return el
}
document.body.appendChild(component())

webpack笔记12-应用篇-懒加载

前言

示例