Web 应用轻量化实战

优化 Web 应用性能：减小包体积的实用方法

在长期开发项目时，我们经常会发现随着功能的不断增加，Web 应用的加载速度变得越来越慢。虽然看起来添加一个表格、按钮或其他组件似乎不会增加太多体积，但最终可能导致无法接受的初始化加载时间，有时甚至需要 10-30 秒。

在本文中，我将介绍一些实用的方法和技巧，帮助你优化 Web 应用的性能，使网站加载更快、体积更小。

🐜 使用 HMPL.js 实现服务器端渲染

HMPL.js 虽然不能让搜索引擎索引页面，但它可以轻松集成到任何 Web 应用或网站中，无论是 WordPress、Vue.js、Tilda、Next.js 还是其他平台。

示例代码如下：

html 复制代码

<!-- index.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>

javascript 复制代码

// client.js
// 编译模板函数
const templateFn = hmpl.compile(
  `<div>
      <!-- 点击按钮，触发增量操作 -->
      <button data-action="increment" id="btn">点击！</button>
      <!-- 显示点击次数，数据从API获取 -->
      <div>点击次数: {{ src: "/api/clicks", after: "click:#btn" }}</div>
  </div>`
);

// 处理点击事件并发送请求
const clicker = templateFn(({ request: { event } }) => ({
  body: JSON.stringify({ action: event.target.getAttribute("data-action") }),
})).response;

// 将组件添加到DOM中
document.querySelector("#app").append(clicker);

HMPL.js 提供了渲染后的 HTML，但没有严格的架构限制。你可以随时启用或禁用该模块，不会产生任何副作用。它的使用非常简单，只包含必要的功能。在示例中，你可以安全地移除 after 参数，在 DOM 渲染期间加载组件。

🌱 查看 HMPL ★

⚙️ 平台依赖

在优化 Web 应用体积时，首先需要考虑你所使用的基础平台。不同的平台有不同的优化方法：Next.js 有特定的优化方案，而自建网站则需要采用不同的策略。

建议首先查看框架或库的配置选项，通过调整设置来获得更好的性能。例如，服务器请求响应的缓存、图片优化插件等功能通常已经内置在配置中，只需要找到并启用它们。

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

减小包体积的最佳方法之一是将页面渲染从客户端转移到服务器端。这种方式允许组件按需加载，项目的 HTML 和 JS 源文件大小将只包含必要的标签和服务器请求，这些请求会将准备好的组件注入到页面中。

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

html 复制代码

<!-- index.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>

javascript 复制代码

// server.js
// 引入Express框架
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 应用开发，以下方法也可以帮助减小包体积：

1. 🔗 移除不必要的依赖

在开发过程中，我们经常会尝试不同的包来实现特定功能。如果忘记删除未使用的包，或者为了一个简单的功能引入整个大型模块，都会导致包体积不必要地增大。

要分析未使用的包，可以使用以下工具：

bash 复制代码

# 安装依赖检查工具
npm install depcheck

# 检查项目依赖
depcheck /path/to/my/project

或者直接使用：

bash 复制代码

npx depcheck

虽然 depcheck 模块不再维护，但它仍然可以帮助你分析依赖关系。使用时要谨慎，因为某些看似未使用的依赖可能是其他模块的必要依赖。

你也可以使用 npm 的内置功能：

bash 复制代码

# 移除未使用的依赖
npm prune

这个命令会移除多余的包。如果指定包名，则只移除匹配的包。

2. 📷 优化媒体文件

这是最简单且最有效的优化方法之一。大型媒体文件（如视频）会显著增加项目体积，影响版本控制和部署效率。

对于图片优化，你可以：

使用在线压缩工具减小图片体积，同时保持质量
将图片格式从 PNG、JPG 转换为更高效的 WebP 格式
使用适当的图片尺寸，避免加载过大的图片

3. 📡 使用 CDN

将常用库从本地 node_modules 转移到 CDN 是另一种有效的优化方法：

javascript 复制代码

// 从本地node_modules导入
import { chunk } from "lodash";

改为：

html 复制代码

<!-- 从CDN引入压缩后的库 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

4. ✂️ 代码分割

使用动态导入是实现代码分割的最简单方法之一。现代打包工具（如 Webpack 和 Vite）支持以下写法：

javascript 复制代码

// main.js
// 为按钮添加点击事件监听器
document.getElementById("loadButton").addEventListener("click", () => {
  // 动态导入模块
  import("./module.js")
    .then((module) => {
      // 执行模块的默认导出函数
      module.default();
    })
    .catch((err) => {
      // 处理加载错误
      console.error("加载模块时出错:", err);
    });
});

你还可以在 Webpack 配置中启用代码块分割：

javascript 复制代码

// webpack.config.js
module.exports = {
  optimization: {
    // 启用代码分割
    splitChunks: {
      // 对所有类型的chunk进行分割
      chunks: "all",
    },
  },
};

5. </> 代码压缩

在编译时对代码进行压缩是减小包体积的有效方法：

bash 复制代码

# 使用UglifyJS压缩代码
uglifyjs file.js -c toplevel,sequences=false

Uglify.js 是最流行的代码压缩工具之一。如果你的打包工具没有内置压缩功能，可以集成它来优化代码。

✅ 结论

这里我们介绍了适用于大多数 Web 应用的通用优化方法。这些方法都是经过实践验证的有效方案，可以帮助你显著提升网站性能。通过合理运用这些技巧，可以让我们的网站加载更快、体积更小，为用户提供更好的体验。