Logo

菜单

发布于 2026-01-06 4 阅读
0

⚙️如何减小Web应用程序的打包大小？🔥

⚙️如何减小Web应用程序的打包大小？🔥

通常情况下，长时间开发一个项目后，你会发现添加的功能越多，Web 应用程序的运行速度就越慢。虽然添加一些看似无意义的功能（例如插件table、扩展程序button或其他本身就占用大量资源的功能）似乎毫无意义，但最终却会导致初始加载时间过长，例如超过 10-30 秒。

在本文中，我想探讨一些方法和小技巧，帮助您避免这种情况，并使您的网站加载速度更快、体积更小。

⚙️ 平台依赖性

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

Vue、Angular

因此，首先值得研究如何配置同一个框架或库，使其能够提供更好的结果，只需更改几个设置即可，例如，对服务器请求的响应进行相同的缓存，或者添加一个图像插件——所有这些有时都已经内置在配置本身中，剩下的就是找到它。

此外，您也可以在 GitHub 上给我们的项目点个星标来支持我们！谢谢❤️！

🌱 星级 HMPL ★

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

减小程序包大小的最佳方法之一是将页面部分渲染从客户端转移到服务器端。这样就能构建一种框架，其中组件会逐块加载。相应地，此类项目的 HTML 和 JS 源文件的大小将仅包含空标签和向服务器发送的请求，服务器会将预先构建好的组件加载到服务器上。

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

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>
Enter fullscreen mode Exit fullscreen mode

server.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 重新设计网站，这样不仅可以对单个页面实现类似的效果，还可以对其他页面（包括动态路由）以及搜索引擎机器人进行索引。

但是，这种实现服务端渲染（SSR，例如 SSG、ISG 等）的方法存在严重的缺点，因此可能并不适用。例如，如果网站已经基于某些侧重于客户端的框架或库，那么重做所有内容可能会耗费大量金钱和时间。此外，选择此类工具（Next.js 除外）的特殊性可能会导致合适的人才短缺。如果一个人只学习过使用某个框架，而该职位又不是热门职位，且很难找到替代的库，那么找到合适的候选人将会非常困难。

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

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

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

使用该模块的操作大致如下：

index.html

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

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

client.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 渲染期间安全地移除和加载组件。

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

这里，如果我们不涉及服务器端的操作，而只是对 Web 应用程序进行常规操作，那么下面描述的方法也有助于减小软件包的大小：

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

在开发 Web 应用程序的过程中，有时需要创建一些功能，于是下载不同的软件包，逐一试用，最终选择最适合的。如果忘记删除，软件包的大小就会相应增加。或者，如果一个庞大的模块与一个可以用普通 JavaScript 完成的任务关联起来，而你却只用了其中的一个函数——这同样毫无意义。

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

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。

这种方法对图像处理非常有效，每张图片可以节省几兆字节的空间，而不会损失任何画质。如今，在线压缩平台可以轻松实现这一点。

压缩图像

此外，您还可以将图像分辨率从 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，它是最流行的代码压缩工具之一。当然，如果默认情况下没有包含 Uglify.js 或类似的打包工具，它也可以与打包工具一起使用。

✅ 结论

首先，在所有列出的方法中，我尝试描述一些最通用的方法，这些方法几乎适用于所有 Web 应用程序。它们是执行此类任务时最常用的方法。我也不想赘述 DRY 和 KISS 原则之类的老生常谈，因为这些原则在减少代码方面已经显而易见，我想要提供更具体的建议。总之，我希望这些方法能够帮助你让网站更小、更快！

非常感谢您阅读这篇文章！

谢谢

文章来源：https://dev.to/hmpljs/how-to-reduce-web-application-bundle-size-1gie
Java 与 Kotlin 的搞笑对决
我对 React 的理解 虚拟 D...