webpack 懒加载(12)

获取全套webpack 4.x教程，请访问瓦力博客

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

注意：如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

src/index.js

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

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

上面代码功能，当点击页面时，再加载loadsh模块，加载完成后再创建一个div元素，div元素填充hello world，最后将div元素返回挂载到document上。

运行webpack

yarn run build

打开dist/index.html,我们点击页面任何一个地方，就会看到页面出现hello**world。

懒加载这个概念还是很有用的，它能够提升我们页面加载速度，提高用户的体验度。在项目后面，小菜会搭一个简易的项目，主要写一下vue中路由懒加载的实现。原理就是利用import()这个新语法，如果要想使用新语法就需要再webpack中配置syntax-dynamic-import