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

通常，在长期处理一个项目时，你会注意到添加的功能越多，Web 应用程序就会变得越慢。尽管看起来添加一个表格、一个按钮或其他一些单独看来重量很轻的东西并没有什么问题。但最终，你会得到一个难以接受的初始加载时间，例如，可能需要超过 10 到 30 秒。

在本文中，我想探讨一些方法和小技巧，它们将帮助你避免这种情况，并使你的网站加载速度尽可能快，且体积尽可能小。

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

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

使用这个模块的操作大概如下：

index.html

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>

client.js

javascript

css 复制代码

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);

在这里，我们同样得到了渲染后的 HTML，但我们没有需要严格遵循的清晰架构。我们可以为任何项目启用或禁用这个模块，并且不会产生任何不良后果。它也很容易使用，因为它包含了少量但必要的功能。此外，在这个示例中，你可以在 DOM 渲染期间放心地删除 after 并加载组件。

🌱 查看 HMPL ★

⚙️ 平台依赖性

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

比如 Vue、Angular 等平台。

因此，首先值得研究如何配置相同的框架或库，以便通过仅更改几个设置就能获得更好的结果，例如，对服务器请求的响应进行缓存，或者使用图像插件 ------ 所有这些有时已经内置在配置中了，你只需要找到它们即可。

👀 从客户端渲染（CSR）迁移到服务器端渲染（SSR）（静态站点生成 SSG、增量静态生成 ISG 等）

减小捆绑包大小的最佳方法之一是将页面部分的渲染从客户端转移到服务器端。这可以形成一种框架，在这种框架中，组件将逐块加载。相应地，这样一个项目的 HTML 和 JS 源文件的大小将只包含空标签和对服务器的请求，服务器会将现成的组件放置在那里。

这种方法的一个示例代码如下：

index.html

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>

server.js

javascript 复制代码

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

    // 设置 EJS 为模板引擎
    app.set('view engine', 'ejs');

    // 示例数据
    const data = {
        title: '服务器端渲染示例',
        content: '这是一个使用 Node.js 和 EJS 进行服务器端渲染的示例。'
    };

    // 定义路由
    app.get('/', (req, res) => {
        // 使用 EJS 渲染 HTML
        res.render('index', { data });
    });

    // 启动服务器
    app.listen(PORT, () => {
        console.log(`服务器正在运行，地址为 http://localhost:${PORT}`);
    });

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

但是，这种进行服务器端渲染（SSR）（静态站点生成 SSG、增量静态生成 ISG 等）的方法有严重的缺点，因此可能并不适用。例如，如果网站已经基于某些原本面向客户端的框架或库构建，那么重新修改所有内容可能会花费大量的金钱和时间。此外，选择此类工具（除了 Next.js 之外）的特殊性可能会导致适合这些任务的人员短缺。如果一个人学会了使用某个框架，而某个职位所涉及的库不太流行且难以替代，那么找到合适的申请人将会很困难。

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

🔎 其他有助于减小捆绑包大小的通用方法

在这里，如果我们不考虑与服务器相关的工作，而只是常规的 Web 应用程序开发工作，那么下面描述的方法也可以帮助减小捆绑包的大小：

🔗 删除不必要的依赖项
在开发 Web 应用程序的过程中，有时你需要创建某些功能，于是下载不同的包，进行试用，选择最适合该任务的包。如果忘记删除那些不需要的包，捆绑包的大小自然就会变大。或者，如果将一个巨大的模块连接到一个可以用常规 JavaScript 解决的任务上，并且只使用了其中的一个函数 ------ 这也是毫无意义的。

例如，你可以使用以下包或类似的工具来分析未使用的包：

bash 复制代码

    npm install depcheck
    depcheck /path/to/my/project

或者

bash 复制代码

    npx depcheck

这个模块虽然不再被支持，但仍然可以让你分析依赖项并识别未使用的依赖项。不过，你需要谨慎使用，因为看起来某些东西没有被使用，但如果没有它，某些模块可能就无法工作 ------ 这一点也需要加以注意。

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

bash 复制代码

    npm prune

这个命令会删除 "多余的" 包。如果提供了包名，那么只会删除与提供的包名匹配的包。

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

这可能是能给出的最简单、最显而易见的建议之一。如果你的项目中有一个视频，其大小与整个 Web 应用程序相当，那么，比如说，使用 git clone 来处理这个项目就会变得很困难。

这种做法对图像来说非常适用，你可以在不损失任何质量的情况下，为每张图像节省几兆的空间。如今，在线压缩平台可以轻松做到这一点。

（压缩后的图像示例）

此外，你可以将图像分辨率从 png、jpg 转换为 webp。这也是一种很好的做法，许多大型 Web 应用程序都在使用。

📡 使用内容分发网络（CDN）

这也是一种常见的方法，即将模块从 npm_modules 转移到外部环境中。

javascript 复制代码

    import { chunk } from "lodash";

或者

html 复制代码

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

这与前面描述的方法有些相似，但含义略有不同。

✂️ 代码拆分

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

main.js

javascript 复制代码

    document.getElementById('loadButton').addEventListener('click', () => {
        import('./module.js')
           .then(module => {
                module.default();
            })
           .catch(err => {
                console.error('加载模块时出错:', err);
            });
    });

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

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

webpack.config.js

javascript 复制代码

    module.exports = {
        optimization: {
            splitChunks: {
                chunks: 'all',
            },
        },
    };

</> 代码压缩
如果你在编译代码时应用压缩，也可以减小捆绑包的大小。这可能是你可以使用的最佳方法之一。

bash 复制代码

    uglifyjs file.js -c toplevel,sequences=false

为此，你可以使用 Uglify.js，它是最流行的代码压缩工具之一。当然，如果捆绑工具默认没有包含它或类似的工具，也可以将其与捆绑工具一起使用。

✅ 结论

首先，在上述所有内容中，我尝试描述了几乎适用于每个 Web 应用程序的最通用的方法。在解决减小应用程序大小这类任务时，这些方法是最常用的。我也不想写一些关于 "DRY（Don't Repeat Yourself，不要重复自己）"、"KISS（Keep It Simple, Stupid，保持简单原则）" 原则的常见建议，因为就减少代码量而言，这些原则已经是显而易见的了，我想要提供更多具体的内容。但无论如何，我希望这些方法能帮助你使你的网站更小、更快！