通常，在长时间处理一个项目时，您会注意到添加的功能越多，Web 应用程序就会变得越慢。尽管看起来添加一个table、一个button或其他一些在某种情况下相当重的东西是没有意义的。结果，您得到了不可接受的初始加载，例如，这可能需要超过 10-30 秒的时间。
在本文中，我想考虑一些方法和小技巧来帮助您避免这种情况，并使您的网站尽可能快速加载且体积更小。
⚙️ 平台依赖性
如果你想减少 Web 应用程序的大小，那么首先你需要从你使用的平台开始。如果我们使用 Next.js，那么这些是一些方法，但如果这些是自写的网站，那么这些会略有不同。
因此，首先，值得研究如何配置相同的框架或库，以便它们提供更好的结果，只需更改几个设置，例如，对服务器请求的响应的相同缓存，或用于图像的附加组件 - 所有这些有时已经内置在配置本身中，剩下的就是找到它。
此外，您还可以在 GitHub 上为我们的项目点赞来支持我们！谢谢 ❤️！
星级 HMPL ★
从 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>服务器.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}`);
});在这里我们看到，借助 EJS 和 Express，我们可以在服务器上呈现所有内容。此外，我们可以为 Next.js 重新设计网站，这样我们不仅可以在一个页面上实现类似的效果，还可以在其他页面上实现类似的效果，包括动态路由，当然还有 robots 索引。
但是，这种创建 SSR（SSG、ISG 等）的方法存在严重的缺点，因此可能不太合适。例如，如果网站已经使用了一些专注于客户端的框架或库，那么重新做所有事情可能会花费大量的金钱和时间。此外，选择此类工具（Next.js 除外）的特殊性可能会导致适合这些任务的人员短缺。如果一个人学会了使用一个框架，而这个职位不是很受欢迎，很难找到替代的库，那么找到应聘者就会很困难。
为了保持面向服务器的方法，同时不出现上述重大问题，您可以使用 HMPL.js 或类似的库。
使用 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/hmpl-js/dist/hmpl.min.js"></script>客户端.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);在这里，我们也会得到渲染的 HTML，但我们没有一个明确的架构可以遵循。我们可以为任何项目禁用或启用该模块，不会有任何后果。它也很容易使用，因为它包含少量但必要的功能。此外，在示例中，您可以after在 DOM 渲染期间安全地删除和加载组件。
其他有助于减少 bundle 大小的通用方法
在这里，如果我们不使用服务器，而只是常规地使用 Web 应用程序，那么下面描述的方法也可以帮助减少捆绑包的大小：
1. 删除不必要的依赖项
在开发 Web 应用程序的过程中，有时您需要创建一些功能，然后下载不同的包，试用它们，选择最适合任务的包。如果忘记删除它们，包的大小只会变得更大。或者，如果将一个巨大的模块连接到一个可以用常规 js 解决的任务，并从那里使用一个函数 - 这也是毫无意义的。
例如，要分析未使用的包，您可以使用以下包或类似的包：
npm install depcheck
depcheck /path/to/my/project或者
npx depcheck虽然不支持此模块，但它仍允许您分析依赖项并识别未使用的依赖项。但是，您需要谨慎使用它，因为看起来某些东西没有使用，但没有它，某些模块将无法工作 - 这也需要控制。
您还可以通过以下命令使用 npm 的内置功能：
npm prune此命令删除“无关”的软件包。如果提供了软件包名称，则仅删除与提供的名称之一匹配的软件包。
2. 在项目中使用较小尺寸的媒体文件
这可能是最简单、最明显的建议之一。如果您的项目中有一个视频的大小与整个 Web 应用程序的大小相同，那么使用相同的视频进行操作将非常困难git clone。
这种做法对于图像非常有用，因为每张图片可以节省几 MB 而不会损失任何质量。如今，在线压缩平台可以轻松做到这一点。
另外，你可以将图像分辨率从 png、jpg 更改为 webp。这也是一种很好的做法，许多大型 Web 应用程序中都采用了这种做法。
3. 使用 CDN
这也是将模块从npm_modules外部环境转移到外部环境的常用方法之一。
import { chunk } from "lodash";或者
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>它与之前描述的有些相似，但含义略有不同。
4.✂️ 代码分割
拆分代码最简单的方法之一是使用动态导入。在 Webpack 和 Vite 等现代打包工具中，你可以轻松地编写如下代码：
主.js
document.getElementById('loadButton').addEventListener('click', () => {
import('./module.js')
.then(module => {
module.default();
})
.catch(err => {
console.error('Error loading the module:', err);
});
});在这种情况下，我们不会立即加载模块，而仅在必要时，即按下按钮时加载。
您还可以启用块分割。这对于分离不同模块之间的通用代码很有用。
webpack.config.js
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
},
},
};5. </> 代码压缩
您还可以通过编译代码时应用最小化来减少包大小。这可能是您可以使用的最佳方法之一。
uglifyjs file.js -c toplevel,sequences=false为此，您可以使用 Uglify.js，它是最受欢迎的代码压缩工具之一。当然，如果它或类似的工具未默认包含在内，它也可以与捆绑器一起使用。
结论
首先，从所有列出的方法中，我试图描述适用于几乎所有 Web 应用程序的最通用方法。它们是设置此类任务时最常用的方法。我也不想写一些关于 DRY、KISS 原则的愚蠢建议，这些原则在减少代码方面已经很明显了，我想要更具体的内容。但无论如何，我希望这些方法能帮助您让您的网站更小更快！