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

注意:如果您使用的是 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

ssl

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

webpack4.x 教程

webpack 准备工作(1) webpack 手写最基本的配置(2) webpack 打包样式(3) webpack 让打包更便捷(4) webpack 打包图片(5) webpack iconfont打包(6) webpack devServer本地开发(7) webpack 处理ES6语法(8) webpack SourceMap配置(9) webpack Tree Shaking(10) webpack js代码分割(11) webpack 懒加载(12) webpack 打包分析,Preloading,Prefetching(13) webpack 模块化区分开发和生产(14) webpack 样式文件的代码分割(15) webpack 浏览器缓存(16) webpack shimming(17) webpack 环境变量(18) webpack Esline(19)