你可以使用这些技巧将 Web 应用程序的大小减少数倍🔥

2025-06-07

你可以使用这些技巧将 Web 应用程序的大小减少数倍🔥

通常，在项目上工作了很长时间后，你会注意到添加的功能越多，Web 应用程序的速度就越慢。虽然，添加一个table、一个button或其他一些在某种情况下相当繁重的东西似乎毫无意义。结果，你的初始加载速度令人难以接受，例如，可能需要 10-30 秒以上的时间。

在本文中，我想考虑一些方法和小技巧，以帮助您避免这种情况，并使您的网站尽可能快速加载并缩小尺寸。

🐜 使用 HMPL.js 实现面向服务器的方法

与下面描述的方法不同，该模块不允许机器人索引页面，但您可以将其连接到任何 Web 应用程序，或者简单地连接到任何网站，无论是 WordPress、Vue.js、Tilda、Next.js 还是任何您想要的网站。

使用该模块看起来是这样的：

索引.html

<main id="app"></main>

<script src="https://unpkg.com/json5/dist/index.js"></script>
<script src="https://unpkg.com/dompurify/dist/purify.min.js"></script>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

客户端.js

const templateFn = hmpl.compile(
  `<div>
      <button data-action="increment" id="btn">Click!</button>
      <div>Clicks: {{ src: "/api/clicks", after: "click:#btn" }}</div>
  </div>`
);

const clicker = templateFn(({ request: { event } }) => ({
  body: JSON.stringify({ action: event.target.getAttribute("data-action") })
})).response;

document.querySelector("#app").append(clicker);
Enter fullscreen mode Exit fullscreen mode

在这里，我们也会获得渲染后的 HTML，但我们没有明确的架构可遵循。我们可以为任何项目禁用或启用该模块，而不会产生任何后果。它也易于使用，因为它包含少量但必要的功能。此外，在示例中，您可以after在 DOM 渲染期间安全地移除和加载组件。

🌱 查看 HMPL ★

⚙️ 平台依赖性

如果你想缩减 Web 应用程序的大小，那么首先需要从你使用的平台入手。如果我们使用 Next.js，那么有一些方法，但如果是自己编写的网站，那么方法就略有不同。

Vue，角度

因此，首先，值得研究如何配置相同的框架或库，以便它们提供更好的结果，只需更改几个设置，例如，对服务器请求的响应的相同缓存，或图像的附加组件 - 所有这些有时已经内置在配置本身中，剩下的就是找到它。

👀 从 CSR 迁移到 SSR（SSG、ISG 等）

减少包大小的最佳方法之一是将页面各部分的渲染从客户端转移到服务器。这样你就可以获得一种框架，组件将逐块加载。因此，此类项目的 HTML 和 JS 源文件的大小将仅由空标签和向服务器发送的请求组成，这些请求会将现成的组件加载到服务器上。

以下代码就是这种方法的一个示例：

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= data.title %></title>
</head>
<body>
    <h1><%= data.title %></h1>
    <p><%= data.content %></p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

服务器.js

const express = require('express');
const app = express();
const PORT = 3000;

// Set EJS as the templating engine
app.set('view engine', 'ejs');

// Sample data
const data = {
    title: 'Server Side Rendering Example',
    content: 'This is an example of Server Side Rendering using Node.js and EJS.'
};

// Define a route
app.get('/', (req, res) => {
    // Render the HTML using EJS
    res.render('index', { data });
});

// Start the server
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});
Enter fullscreen mode Exit fullscreen mode

我们看到，借助 EJS 和 Express，我们可以在服务器上渲染所有内容。此外，我们还可以使用 Next.js 重新设计网站，这样不仅可以在一个页面上实现类似的效果，还可以在其他页面上实现，包括使用动态路由，当然还有 robots 索引。

但是，这种创建 SSR（SSG、ISG 等）的方法存在严重的缺陷，因此可能并不适用。例如，如果网站已经使用了一些专注于客户端的框架或库，那么重新构建所有内容可能会耗费大量的金钱和时间。此外，选择此类工具（Next.js 除外）的具体细节可能会导致适合这些任务的人才短缺。如果一个人学习了某个框架，而这个职位的空缺并不热门，难以替代，那么找到合适的候选人将会很困难。

为了保持面向服务器的方法，同时又不出现上述重大问题，您可以使用 HMPL.js 或类似的库。

🔎 其他有助于减少 bundle 大小的通用方法

在这里，如果我们不与服务器打交道，而只是与 Web 应用程序进行常规工作，那么下面描述的方法也可以帮助减少捆绑包的大小：

1. 🔗 删除不必要的依赖项

在开发 Web 应用的过程中，你可能需要创建一些功能，于是下载不同的包，试用它们，最终选择最合适的。如果忘记删除它们，包的大小只会相应增大。或者，如果一个大型模块连接到一个可以用常规 JS 解决的任务，并且只使用了其中的一个函数——这样做也毫无意义。

例如，要分析未使用的包，您可以使用以下包或类似的包：

npm install depcheck
depcheck /path/to/my/project
Enter fullscreen mode Exit fullscreen mode

或者

npx depcheck
Enter fullscreen mode Exit fullscreen mode

虽然此模块不受支持，但它仍然允许您分析依赖项并识别未使用的依赖项。但是，您需要谨慎使用它，因为看起来某些东西没有被使用，但如果没有它，某些模块将无法工作——这也需要控制。

您还可以通过以下命令使用 npm 的内置功能：

npm prune
Enter fullscreen mode Exit fullscreen mode

此命令用于删除“多余的”软件包。如果提供了软件包名称，则仅删除与指定名称之一匹配的软件包。

2. 📷 在项目中使用较小尺寸的媒体文件

这或许是最简单、最显而易见的建议之一。如果你的项目中有一个视频的大小与整个 Web 应用程序的大小相同，那么处理起来就会非常困难，比如说，用相同的git clone……

这种做法对图像非常有效，每张图片可以节省几MB，而且质量不会有任何损失。如今，在线压缩平台可以轻松做到这一点。

压缩图像

另外，您可以将图像分辨率从 png、jpg 更改为 webp。这也是一种很好的做法，许多大型 Web 应用程序中都采用了这种方法。

3. 📡 使用 CDN

这也是将模块从npm_modules外部环境转移到外部环境的常用方法之一。

import { chunk } from "lodash";
Enter fullscreen mode Exit fullscreen mode

或者

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

它与之前描述的有些相似，但含义略有不同。

4. ✂️ 代码拆分

拆分代码最简单的方法之一是使用动态导入。在 Webpack 和 Vite 等现代打包工具中，你可以轻松地编写如下代码：

main.js

document.getElementById('loadButton').addEventListener('click', () => {
    import('./module.js')
        .then(module => {
            module.default();
        })
        .catch(err => {
            console.error('Error loading the module:', err);
        });
});
Enter fullscreen mode Exit fullscreen mode

在这种情况下，我们不会立即加载模块，而仅在必要时，即按下按钮时加载。

您还可以启用块拆分。这对于分离不同模块之间的通用代码非常有用。

webpack.config.js

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    },
};
Enter fullscreen mode Exit fullscreen mode

5. </> 代码压缩

你也可以通过在编译过程中对代码进行压缩来减少包的大小。这可能是你能使用的最佳方法之一。

uglifyjs file.js -c toplevel,sequences=false
Enter fullscreen mode Exit fullscreen mode

为此，您可以使用 Uglify.js，它是最流行的代码压缩工具之一。当然，如果它或类似的打包工具未默认包含在内，它也可以与打包工具一起使用。

结论

首先，我尝试从列出的所有方法中描述一些几乎适用于所有 Web 应用程序的最通用方法。这些方法在设置此类任务时最常用。我也不想写一些关于 DRY 和 KISS 原则的愚蠢建议，这些原则在精简代码方面已经显而易见，我希望提供更具体的建议。但无论如何，我希望这些方法能够帮助您让网站变得更小、更快！

您可以在 Twitter 上关注作者！

非常感谢大家阅读这篇文章❤️！

感谢您

文章来源：https://dev.to/hmpljs/you-can-reduce-the-size-of-web-applications-several-times-using-these-tips-4807
Devto 翻译
PREV
创建无限滚动钩子
NEXT
🎙️我们在 HMPL 中实现了新功能，以帮助开发人员缩小 Web 应用程序的大小🔥