跳到主要内容

如何编写更快,更轻的JavaScript代码

许多小的变化可以带来巨大的收益。使用户能够以最少的摩擦力与您的站点进行交互。运行最少量的JavaScript来提供真正的价值。这可能意味着采取渐进的步骤来实现目标,但最终,您的用户会感谢您。以下是实现这一目标的一些建议。

介绍代码拆分

代码拆分帮助您分解JavaScript,这样您只需先加载用户需要的代码,然后再加载懒惰的代码。这有助于避免运输整体Main.js将文件提供给包含整个网站的JavaScript的用户,而不仅仅是页面需要的内容。

JavaScript code-splitting

拆分大型单片JavaScript包可以在页面,路由或组件的基础上完成

将代码拆分引入您的站点的最佳方法是使用动态进口()句法。以下是一个例子使用JavaScript模块静态地“导入”一些数学代码。因为我们没有在需要时动态(懒惰地)加载此代码,所以它最终会出现在我们的默认JavaScript包中。

从'./math'导入{add}; console.log(add(30,15));

切换到动态后进口(),我们可以在需要时懒洋洋地拉入数学实用程序。这可能是当用户即将使用需要它的组件,或导航到依赖于此功能的新路由时。下面我们导入数学点击一下按钮后。

const btn = document.getElementById('load'); btn.addEventListener('click',()=> {import('./ math')。then(math => {console.log(math.add(30,15));});});

当一个JavaScript模块捆绑器喜欢的WebPack看到这个进口()语法,它开始代码拆分您的应用程序。这意味着动态代码可以被推送到一个单独的文件中,该文件仅在需要时加载。

代码拆分可以在页面,路由或组件级别完成。 Create React App,Next.js,Preact-CLI,Gatsby等工具支持开箱即用。可以使用指南来完成此任务应对Vue.js

如果你正在使用React,我很乐意推荐React可加载,一个高阶组件,用于有效地加载组件。它将动态导入包装在一个很好的API中,用于将代码拆分引入给定组件的应用程序。

以下是在React中静态导入库组件的示例:

从'./GalleryComponent'导入GalleryComponent; const MyComponent =()=>(  );

使用React Loadable,我们可以动态导入gallery组件,如下所示:

import可从'react-loadable'加载; const LoadableGalleryComponent =可加载({loader:()=> import('./ GalleryComponent'),loading:()=> 
载入中...
,}); const MyComponent =()=>( );

许多大型团队最近在代码分裂的背后看到了巨大的胜利。努力重写他们的移动网络体验,以确保用户能够尽快与他们的网站进行互动,两者都是推特火种当他们采用激进的代码分割时,交互时间增加了50%。

审核您的工作流程

堆栈就像Next.jsPreact CLIPWA入门套件尝试强制执行良好的默认设置,以便在平均移动硬件上快速加载和获取交互。

许多这些网站所做的另一件事是将审计作为其工作流程的一部分。值得庆幸的是,JavaScript生态系统有许多很棒的工具可以帮助进行捆绑分析。类似的工具Webpack Bundle Analyzer源地图浏览器捆绑好友使您能够审核捆绑包以获取减少捆绑的机会。

Lighthouse针对页面运行一系列审核并生成报告

如果您不确定自己是否有任何JavaScript性能问题,请查看灯塔。 Lighthouse是Chrome开发者工具中的一个工具,也是可用作Chrome扩展程序。它为您提供深入分析,突出了提高绩效的机会。

我们最近添加了对标记高JavaScript启动时间的支持灯塔。此审计突出显示可能需要花费很长时间进行解析/编译的脚本,这会延迟交互性。您可以将此审核视为拆分这些脚本或仅执行较少工作的机会。

检查您是否未发送未使用的代码

单击右上角的图标放大

您可以做的另一件事是确保您没有将未使用的代码发送给您的用户:代码覆盖范围是Chrome DevTools中的一项功能,可以提醒您页面中未使用的JavaScript(和CSS)。在DevTools中加载页面,Coverage选项卡将显示执行的代码数量与加载的数量。您只需提供用户需要的代码即可提高页面的性能。

这对于识别拆分脚本的机会以及推迟加载非关键脚本直到需要它们非常有用。值得庆幸的是,我们可以通过各种方式解决这个问题,其中一种方法是制定绩效预算。

设计绩效预算

性能预算至关重要,因为它们可以让每个人都在同一个页面上。他们创造了一种共享热情的文化,以不断改善用户体验和团队责任。预算定义了可衡量的约束,因此团队可以实现其绩效目标。由于你必须生活在预算的限制之内,所以每一步都要考虑绩效,而不是事后的想法。Per Tim Kadlec,绩效预算指标可包括:

  • 里程碑时间:基于加载页面的用户体验的定时(例如,交互时间)。
  • 基于质量的指标:基于原始值(例如JavaScript的权重,HTTP请求的数量),专注于浏览器体验。
  • 基于规则的指标:由Lighthouse或WebPageTest等工具生成的分数;通常是一个单一的数字或系列来评估您的网站。

绩效通常是文化挑战,而不是技术挑战。在计划会议期间讨论绩效。向业务利益相关者询问他们的业绩预期。他们是否了解绩效如何影响他们关心的业务指标?询问工程团队他们计划如何解决性能瓶颈问题。虽然这里的答案可能不尽如人意,但他们开始谈话。

那么性能预算的工具呢?您可以在与之持续集成的情况下设置Lighthouse评分预算灯塔CI项目。许多性能监控服务支持设置性能预算和预算警报,包括口径的TreoSpeedCurve

4种快速减少JS加载时间的方法

现代网站通常将所有JavaScript组合成一个大型捆绑包。以这种方式提供JavaScript时,下载和处理时间在移动设备和网络上可能非常重要。以下是有关如何确保快速加载JavaScript的一些提示。

01.仅加载当前页面所需的JS
优先考虑用户需要的内容,并通过代码拆分来延迟其余部分。这为您提供了加载和快速交互的最佳机会。学习审核JavaScript代码以发现删除非关键代码的机会。

02.优化你的JavaScript
使用压缩,缩小和其他JS优化技术。压缩和缩小是向用户发送较少字节的JavaScript的良好优化。如果您已经在使用JavaScript,请考虑进行评估Brotli为了更多的节省。使用Webpack和框架构建站点?树摇动(删除未使用的导入代码),修剪未使用的库和polyfill,选择更精简的实用程序所有这些都可以节省很多钱。

03.评估用户体验的好处
如果客户端JavaScript没有使用户体验受益,请问自己是否真的有必要。也许服务器端呈现的HTML实际上会更快。考虑将客户端框架的使用限制为绝对需要它们的页面。如果做得不好,服务器渲染和客户端渲染是一场灾难。

04.拥抱绩效预算
拥抱绩效预算并学会在其中生活。对于移动设备,目标是JS预算<170kB缩小/压缩。未压缩的这仍然是~0.7MB的代码。预算对成功至关重要;但是,它们不能孤立地神奇地修复性能。团队文化,结构和执法问题。

资源

真实的绩效预算
深入探讨绩效预算的重要性。 Alex Russell的这本指南询问我们是否可以承担我们为中位数手机用户加载的所有JavaScript,因为它们对用户体验有影响。

通过代码拆分减少JavaScript有效负载
减少加载Webpack或Parcel的JavaScript的实用指南。它还包括指向React,Angular和其他代码分割指南的链接。

通过树摇动减少JavaScript有效负载
树摇动是死码消除的一种形式。本指南介绍了如何删除未在网页中使用的JavaScript导入,以帮助减少JavaScript捆绑包。

灯塔
Lighthouse是一款免费的自动化工具,可帮助Chrome团队提高网页质量。它具有性能,可访问性等方面的审核。

Pinterest案例研究
Pinterest将其JavaScript捆绑包从2.5MB减少到<200kB,并将交互时间从23秒减少到5.6秒。收入增长44%,注册量增加753%,移动网络上每周活跃用户数增加上涨103%

AutoTrader案例研究
AutoTrader将其JavaScript包大小减少了56%,并减少了约50%的交互时间。

本文最初发表于,这是全球最畅销的网页设计师和开发者杂志。购买问题313要么订阅

阅读更多:



翻译字数超限