免费获取策划方案多一份参考,总有益处

重庆网站建设

Website construction

案例602

重庆网站建设

使用React分解代码:Web开发的好处

来源:派臣科技|时间:2019-11-22|浏览:

当代码库增长时,web应用程序往往会变慢。为了保证良好的性能,React开发可以应用各种优化技术。在本文中,我们将介绍一种非常成功的方法,它可以让您突破常规限制。

什么是代码分割?

每天、每周或每个月,您的单页应用程序都在扩展,添加了新功能,并且变得越来越大、越来越重。您想要提供良好的用户体验,但是下载大量的应用程序代码来显示单个屏幕似乎不是一个好办法。问题很简单——为了初始化应用程序,需要下载大量的数据。

这个问题的解决方案是使用React进行代码拆分(但是也可以选择其他任何JavaScript库)。此方法使应用程序可以按需加载到多个独立的块中。因此,您不必将应用程序的代码打包到一个或多个文件中。您可以决定哪些模块应该被分离,并在需要时快速加载它们。

什么时候值得在React中使用代码分割?

为了理解什么时候应该使用代码分割,了解术语“交互时间”(TTI)是很有帮助的。这个值指定了加载网站初始化和与用户交互所需的所有必要资产所需的时间。你不能让用户一直等待,因为他们会完全停止使用web应用程序(研究表明,用户希望页面加载时间不到2秒,所以去猜吧……)。因此,为了提供出色的用户体验,您需要使TTI尽可能低。这正是代码分解的用武之地。

它在大型JavaScript应用程序中非常有用,当您需要应用程序快速初始化时,不需要使用太多的处理能力(特别是在移动设备中),当应用程序有多个权限组或区域仅对特定用户可见时。

到底是谁在使用代码分割呢?

你会惊讶地发现,这种方法的最大受益者是两大力量:Instagram和YouTube。

整个Instagram产品代码库的大小只有2mb多一点。由于代码分割,当一个用户进入主页时,只有四分之一的内容(这是主页显示所必需的)是为登录用户加载的。

就YouTube而言,它的桌面应用程序是一组多个连接的应用程序。所有用于浏览和播放视频的主要视图都包括主应用程序。主页、播放列表、视频页面、评论、用户简介和其他部分总共超过1.2MB,但播放视频只需要其中的一半。其他块按需加载。

在React开发中使用代码分割的好处

最重要的代码分割好处包括:

-大幅减少你需要下载和解析的数据,使应用程序具有交互性(因此实现更好的TTI)

-物理分离不同的应用程序部分,并能够决定什么时候浏览器应该加载他们

-排除常规用户的管理代码以优化文件大小和隐藏潜在的敏感数据的能力

客户端缓存的改进是通过只更新应用程序中那些实际上已经改变的部分来实现的

然而,分裂的代码不仅仅是花和彩虹。您应该记住,代码分割需要在页面初始化后下载一些数据。当internet连接中断时,无法加载其他模块(所以一定要为用户编写一个漂亮的弹出消息)。

最后一个想法——始终记住要分析哪些模块在任何时候都是必需的,以及当用户进入特定路由时可以异步加载哪些模块。它将帮助您了解应用程序的性能方面,并在更大程度上对其进行优化。

留言

返回顶部

君
重庆网站建设重庆网站建设使用React分解代码:Web开发的好处