减少 JavaScript 包大小并提高性能的成熟技术

作为畅销书作家，我邀请您在亚马逊上探索我的书籍。不要忘记在 Medium 上关注我并表示您的支持。谢谢你！您的支持意味着全世界！

作为一名开发人员，我了解到优化 JavaScript 包大小对于创建快速、高效的 Web 应用程序至关重要。多年来，我发现了几种始终能产生出色结果的技术。让我分享我对六种减少 JavaScript 包大小的强大方法的经验和见解。

代码分割在我的开发过程中改变了游戏规则。通过使用动态导入，我能够按需加载 JavaScript 模块，从而显着减少初始加载时间。这种方法对于具有复杂功能集的大型应用程序特别有益。这是我如何实现代码分割的示例：

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

在此示例中，仅当用户单击按钮时才加载重型模块，从而保持初始包大小较小。

摇树是我经常使用的另一种技术。通过利用 ES6 模块和 Webpack 或 Rollup 等构建工具，我可以消除捆绑包中的死代码。此过程会删除未使用的导出，从而显着减小最终包的大小。以下是我如何构建代码以实现有效的树摇动的简单示例：

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();

在这种情况下，当与支持树摇动的工具捆绑时，未使用的函数将从最终捆绑中排除。

缩小是我的优化工具包中的标准做法。我使用 UglifyJS 或 Terser 等工具来删除空格、缩短变量名称并优化代码。此过程可以在不改变功能的情况下显着减小文件大小。这是缩小前后的示例：

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

压缩是我经常实施的另一项关键技术。通过在服务器上启用 Gzip 或 Brotli 压缩，我可以显着减少文件传输大小。这通常是在服务器级别配置的。例如，在 Apache .htaccess 文件中：

<ifmodule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</ifmodule>

延迟加载是我性能优化工具库中的一个强大工具。通过将非关键资源的加载推迟到需要时才加载，我可以显着缩短初始页面加载时间。这是我如何实现图像延迟加载的示例：

<img  src="/static/imghwm/default1.png" data-src="placeholder.jpg" class="lazy" data- alt="减少 JavaScript 包大小并提高性能的成熟技术" >



<p>This code uses the Intersection Observer API to load images only when they're about to enter the viewport.</p>

<p>Lastly, I always perform bundle analysis to visualize my bundle composition and identify optimization opportunities. Tools like webpack-bundle-analyzer have been invaluable in this process. Here's how I typically set it up in my Webpack configuration:<br>
</p>

<pre class="brush:php;toolbar:false">const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ... other webpack config
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

这会生成一个交互式树形图，帮助我识别大型依赖项和潜在的优化区域。

这些技术一直帮助我减少 JavaScript 包的大小，从而缩短加载时间并提高 Web 应用程序的性能。然而，值得注意的是，优化是一个持续的过程。随着网络技术的发展，新的优化技术不断出现，保持更新并相应地调整我们的策略至关重要。

我发现特别具有挑战性的一个方面是平衡优化与开发速度。激进的优化有时会使代码库更难维护或调试。例如，虽然缩小对于生产来说非常有用，但它会使调试变得更加困难。这就是为什么我总是确保有可用于调试目的的源映射。

我面临的另一个挑战是处理第三方库。虽然我们可以优化自己的代码，但第三方依赖项通常是预先捆绑的，并且可以显着增加我们的捆绑包大小。在这种情况下，我发现寻找替代的、更轻的库或使用动态导入等技术仅在需要时加载这些库很有帮助。

还值得一提的是，不同的应用程序可能会受益于不同的优化策略。例如，单页面应用程序 (SPA) 可能会从代码分割和延迟加载中受益更多，而更简单的多页面网站可能会更多地关注缩小和压缩。

实施这些优化时，衡量其影响至关重要。我总是在实施优化之前和之后进行性能审核，以确保它们达到预期的效果。像 Lighthouse 或 WebPageTest 这样的工具在这方面非常有价值。

让我们通过更复杂的示例更深入地了解其中一些技术。

对于 React 应用程序中的代码分割，我可能会使用 React.lazy 和 Suspense：

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

此设置允许单独加载每个路由，从而减少初始包大小。

对于 Tree Shaking，需要注意的是，它最适合使用 ES6 模块语法。以下是我如何构建实用程序模块以充分利用 Tree Shaking 的示例：

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();

在这种情况下，如果减法和除法函数没有在应用程序的其他地方使用，它们将从最终的包中剔除。

当谈到缩小时，现代构建工具通常默认包含此步骤。然而，有时我们可以通过调整设置来获得更好的结果。例如，对于 Terser，我们可以使用如下配置：

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

此配置不仅缩小了代码，还删除了控制台语句，这对生产构建很有帮助。

对于压缩，虽然服务器端配置至关重要，但我们也可以使用 webpack 插件来预压缩我们的资源。 CompressionWebpackPlugin 非常适合这个：

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);

此插件将与原始资产一起创建资产的 gzip 压缩版本，如果您的服务器配置为使用它们，则可以更快地交付内容。

延迟加载不仅仅限于图像。我们可以将其应用于任何不立即需要的资源。例如，我们可能会延迟加载一个繁重的第三方库：

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();

这样，图表库仅在用户想要查看图表时加载，从而保持我们的初始包精简。

在捆绑分析方面，获得的见解可能会带来一些令人惊讶的优化。例如，我曾经发现日期格式库给我的包增加了很大的重量。通过用一些涵盖我们特定用例的自定义函数替换它，我能够减少大量的包大小：

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);

这种通过捆绑分析进行的有针对性的优化可以带来显着的性能提升。

总之，优化 JavaScript 包大小是一个多方面的过程，需要充分了解应用程序的结构和需求。通过实施这些技术——代码分割、树摇动、缩小、压缩、延迟加载和包分析——我们可以显着减小包大小并提高应用程序性能。请记住，我们的目标不仅仅是拥有更小的捆绑包，而是为我们的用户提供更快、更高效的体验。随着我们不断突破网络可能性的界限，这些优化技术只会变得更加重要。

---

101 本书

101 Books是一家人工智能驱动的出版公司，由作家Aarav Joshi共同创立。通过利用先进的人工智能技术，我们将出版成本保持在极低的水平——一些书籍的价格低至 4 美元——让每个人都能获得高质量的知识。

查看我们的书Golang Clean Code，亚马逊上有售。

请继续关注更新和令人兴奋的消息。购买书籍时，搜索 Aarav Joshi 以查找更多我们的书籍。使用提供的链接即可享受特别折扣！

我们的创作

一定要看看我们的创作：

投资者中心 | 投资者中央西班牙语 | 投资者中德意志 | 智能生活 | 时代与回响 | 令人费解的谜团 | 印度教 | 精英开发 | JS学校

---

我们在媒体上

科技考拉洞察 | 时代与回响世界 | 投资者中央媒体 | 令人费解的谜团 | 科学与时代媒介 | 现代印度教

以上是减少 JavaScript 包大小并提高性能的成熟技术的详细内容。更多信息请关注PHP中文网其他相关文章！