耀极客论坛

 找回密码
 立即注册
查看: 446|回复: 0

webpack的懒加载和预加载详解

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 01:39:10 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了webpack的懒加载和预加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

正常加载
  为了看的方便,index.js中的代码非常简单
  1. console.log('index.js执行了')
  2. import { test } from './test.js'
  3. document.getElementById('btn-wrap').onclick = function () {
  4.     test()
  5. }
复制代码
  test.js
  1. console.log('test.js执行了')
  2. export function test() {
  3.     const value = 'hello world'
  4.     console.log('test value: ', value)
  5. }
复制代码
  在index.html中添加按钮
  1.     ‹button id='btn-wrap'>点击‹/button>
复制代码
  执行webpack命令:

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

懒加载
  修改index.js中的代码
  1. console.log('index.js执行了')
  2. // import { test } from './test.js'
  3. // document.getElementById('btn-wrap').onclick = function () {
  4. //     test()
  5. // }
  6. document.getElementById('btn-wrap').onclick = function () {
  7.     console.log('====  点击按钮')
  8.     import(/*webpackChunkName:'test' */"./test")
  9.         .then(({test}) => {
  10.             console.log('test加载成功')
  11.             test()
  12.         })
  13.         .catch(error => {
  14.             console.log('test加载失败 error:', error)
  15.         })
  16. }
复制代码
  再次执行webpack命令,在浏览器中查看日志
  点击按钮之前只加载了index.js

  点击按钮:

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

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

没有使用预加载
  点击按钮之前不会加载test.js文件

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


使用预加载
  设置webpackPrefetch:true使用预加载
  1. document.getElementById('btn-wrap').onclick = function () {
  2.     console.log('====  点击按钮')
  3.     import(/*webpackChunkName:'test' ,webpackPrefetch:true*/"./test")
  4.         .then(({test}) => {
  5.             console.log('test加载成功')
  6.             test()
  7.         })
  8.         .catch(error => {
  9.             console.log('test加载失败 error:', error)
  10.         })
  11. }
复制代码
  点击按钮之前就预加载了test.js文件:

  点击按钮:


总结
  正常加载:很多资源并行加载,同一时间加载多个文件
  懒加载:需要时才加载
  预加载:等其他资源加载完毕,浏览器空闲了,再偷偷加载被设置为预加载的资源
  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 04:30 , Processed in 0.063224 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表