• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

webpack的懒加载和预加载详解

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

正常加载

为了看的方便,index.js中的代码非常简单

console.log('index.js执行了')
import { test } from './test.js'
document.getElementById('btn-wrap').onclick = function () {
    test()
}

test.js

console.log('test.js执行了')
export function test() {
    const value = 'hello world'
    console.log('test value: ', value)
}

在index.html中添加按钮

    <button id='btn-wrap'>点击</button>

执行webpack命令:

可以看到没有点击按钮时,test.js就已经加载了 。如果test.js比较大,加载比较耗性能。我们就希望能在需要使用的时候在加载

懒加载

修改index.js中的代码

console.log('index.js执行了')
// import { test } from './test.js'
// document.getElementById('btn-wrap').onclick = function () {
//     test()
// }
document.getElementById('btn-wrap').onclick = function () {
    console.log('====  点击按钮')
    import(/*webpackChunkName:'test' */"./test")
        .then(({test}) => {
            console.log('test加载成功')
            test()
        })
        .catch(error => {
            console.log('test加载失败 error:', error)
        })
}

再次执行webpack命令,在浏览器中查看日志

点击按钮之前只加载了index.js

点击按钮:

可以看到点击按钮之后test.js才执行。

预加载

懒加载实现了js文件按需加载,在需要使用时才进行加载,但是如果js文件非常大加载速度比较慢,在使用时再加载就会使页面出现卡顿。为了优化这个问题,可以使用Prefetch先预加载。

没有使用预加载

点击按钮之前不会加载test.js文件

点击按钮之后才会去加载test.js文件

使用预加载

设置webpackPrefetch:true使用预加载

document.getElementById('btn-wrap').onclick = function () {
    console.log('====  点击按钮')
    import(/*webpackChunkName:'test' ,webpackPrefetch:true*/"./test")
        .then(({test}) => {
            console.log('test加载成功')
            test()
        })
        .catch(error => {
            console.log('test加载失败 error:', error)
        })
}

点击按钮之前就预加载了test.js文件:

点击按钮:

总结

正常加载:很多资源并行加载,同一时间加载多个文件

懒加载:需要时才加载

预加载:等其他资源加载完毕,浏览器空闲了,再偷偷加载被设置为预加载的资源

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注极客世界的更多内容!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
详解vue3中的非父子组件传值发布时间:2022-02-05
下一篇:
Json优缺点及使用介绍发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap