JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

webpack的懒加载和预加载详解

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了webpack的懒加载和预加载详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

正常加载

为了看的方便，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文件：

@H_360_116@

点击按钮：

总结

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

懒加载：需要时才加载

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

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本宝典的更多内容!

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的webpack的懒加载和预加载详解全部内容，希望文章能够帮你解决webpack的懒加载和预加载详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程