千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 如何使我的JavaScript应用程序速度提高2倍

如何使我的JavaScript应用程序速度提高2倍

来源:千锋教育
发布人:syq
时间: 2022-09-23 16:27:00 1663921620

  在本文中,我们将快速浏览一下可用于尽快创建 Web 应用程序的技巧。如今,拥有一个快速&可持续的Web应用程序对于科技公司来说是一件必不可少的事情,并且拥有这个庞大的Web开发人员社区,实现这个目标比平常容易。

JavaScript应用程序速度

  但首先,我想想象一下一个新的JavaScript Web应用程序实际上如何在客户端工作。

  浏览器如何理解 JS Web 应用程序?

  让我们通过 Web 应用阶段的渲染图来执行此操作。

1

  对于使用客户端渲染 (CSR) 方法的所有 JS 应用,此图片几乎相同。

  构建我们的JS文件下载和渲染的块,然后我们有我们的网站。看起来很容易,不是吗?!在这些步骤的引擎盖下是一个由新方法组成的大黑洞,它帮助我们使这个过程更快,更有效率,所以让我们来谈谈它们。

  捆绑包和块

  你用 React、Vue.js 或 Angular 格式编写的代码在编写时和渲染时不会相同,代码由模块捆绑器转换为许多片段、块或捆绑包,并带有向后兼容和纯 JS 代码,让浏览器理解代码并向用户呈现一个外观正常的网站。让我用一个由网络包捆绑的小型React应用程序向您展示它。

2

  这是我们编写的代码

3

  这是由 web 包生成的上一个代码包的一部分

  看!Webpack会将所有的Lodash代码导入到一个文件中,其中包含我们已经编写的JS代码!此文件包将被发送到浏览器,并在下载完成后开始呈现。因此,想象一个大块文件 - 下载它的速度有多慢!

  优化

  这里的大部分速度技巧都是关于通过执行诸如延迟加载,编写自定义库而不是全部安装它们,压缩块文件和Core Web Vite之类的事情来减小块文件大小(我也写了一篇关于此的文章,您可以在此处阅读)。所以让我们来做吧。

  延迟加载和代码拆分

  这里的主要概念是防止加载不必要的代码或在用户需要的某些逻辑点加载它们,这样我们就不会在第一次或每次刷新时加载整个块,而只导入和下载我们当时需要的代码!

4

  模块捆绑器

  这个概念对于选择Webpack的开发人员来说非常简单,但现在比以前要棘手得多,因为最近出现了一些很酷的新模块捆绑器,使这个过程比以前越来越高性能,我现在选择这部分是Vite!

  但是为什么维特比网络包更好呢?

  Vite 更喜欢提供源代码而不是本机 ESM。通过允许浏览器执行捆绑器的部分职责,Vite可以根据浏览器的要求根据需要更改源代码。仅当在当前屏幕上使用条件动态导入背后的代码时,才会处理该代码。

5

  压缩

  这个东西是由大多数当前的模块捆绑器处理的,但这里的一个技巧是使用Brotli作为传统GZIP算法以外的压缩算法,Brotli将捆绑软件大小减少了20%-30%!是的,这很酷。

6

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT