​怎么缩减JavaScript代码?

SinoClick发表于:2023年08月02日 19:18:40更新于:2023年08月02日 19:31:26

概述

缩减JavaScript代码是一个优化网页性能的重要步骤,它通过移除空白和不必要的代码,创造出一个更小但完全有效的代码文件。这个过程可以显著减少网页的载荷大小,缩短脚本的解析时间,从而提升用户的浏览体验和网页的加载速度。

解决方案

缩减是一个移除空白和任何不必要代码的过程,以创建一个更小但完全有效的代码文件。Terser是一款广受欢迎的JavaScript压缩工具。webpack v4默认包含了这个库的插件,用于创建缩减后的构建文件。

针对特定技术栈的指导

#Shopify

Shopify平台自动对所有的JavaScript文件进行压缩和优化,因此,你无需手动进行JavaScript文件的缩减。然而,为了进一步提高性能,你可以考虑减少JavaScript的使用,避免使用过多的库和插件,以及合理地组织和管理你的代码。

#WordPress

WordPress的许多插件可以通过连接、缩减和压缩你的脚本来加快你的网站速度。如果可能,你可能还想使用构建过程来预先进行这种缩减。

#Drupal

请确保你已在"管理 > 配置 > 开发"页面中启用了"聚合JavaScript文件"的选项。你还可以通过额外的模块配置更高级的聚合选项,通过连接、缩减和压缩JavaScript资源来加快你的网站速度。

#Joomla

Joomla的许多扩展可以通过连接、缩减和压缩你的脚本来加快你的网站速度。也有提供此功能的模板。

#Magento

使用Terser来缩减所有来自静态内容部署的JavaScript资源,并禁用内置的缩减功能。

#React

如果你的构建系统自动缩减JS文件,确保你正在部署应用程序的生产版本。你可以使用React开发者工具扩展来检查这一点。

资源

缩减JavaScript审计的源代码:

https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/byte-efficiency/unminified-javascript.js