webpack的懒加载和预加载详解

极客

　　这篇文章主要为大家介绍了webpack的懒加载和预加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

正常加载
　　为了看的方便，index.js中的代码非常简单

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

复制代码

　　test.js

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

复制代码

　　在index.html中添加按钮

2.     ‹button id='btn-wrap'>点击‹/button>

复制代码

　　执行webpack命令：

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

懒加载
　　修改index.js中的代码

2. console.log('index.js执行了')
3. // import { test } from './test.js'
4. // document.getElementById('btn-wrap').onclick = function () {
5. //     test()
6. // }
7. document.getElementById('btn-wrap').onclick = function () {
8.     console.log('====  点击按钮')
9.     import(/*webpackChunkName:'test' */"./test")
10.         .then(({test}) => {
11.             console.log('test加载成功')
12.             test()
13.         })
14.         .catch(error => {
15.             console.log('test加载失败 error:', error)
16.         })
17. }

复制代码

　　再次执行webpack命令，在浏览器中查看日志
　　点击按钮之前只加载了index.js

　　点击按钮：

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

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

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

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

使用预加载
　　设置webpackPrefetch:true使用预加载

2. document.getElementById('btn-wrap').onclick = function () {
3.     console.log('====  点击按钮')
4.     import(/*webpackChunkName:'test' ,webpackPrefetch:true*/"./test")
5.         .then(({test}) => {
6.             console.log('test加载成功')
7.             test()
8.         })
9.         .catch(error => {
10.             console.log('test加载失败 error:', error)
11.         })
12. }

复制代码

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

　　点击按钮：

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

---