很多时候，当你长时间处理一个项目时，你会发现添加的功能越多，网页应用的运行速度就越慢。尽管单个的组件如 table 或 button 在单独测试时似乎并不消耗太多资源，但最终导致了让人难以忍受的初始加载时间，比如可能需要十几秒到三十几秒。
在这篇文章中，我想分享一些方法和小技巧，帮助你避免这些问题，让网站尽可能快地加载且体积尽可能小。
⚙️ 平台依赖如果你想要减少一个网页应用的体积，那么首先你需要从你使用的底层平台开始。如果使用的是 Next.js，有一些方法可以做到这一点；如果是自写的网站，方法会有所不同。
首先，我们可以看看如何配置框架和库，以便通过调整一两个设置来获得更好的效果，例如对服务器请求的响应缓存，或图片的相关插件——这些功能有时已经内置在配置中，只需找到并启用它们即可。
另外，你可以在 GitHub 上给我们的项目点个赞！谢谢，❤
👀 从CSR迁移到SSR SSG ISG等将页面的部分渲染从客户端转移到服务器端，是减小包大小的最好方法之一。这样你可以获得一种框架，其中组件会逐块加载。相应地，此类项目中的 HTML 和 JS 源文件将仅包含空标签和对服务器的请求，这些请求会获取现成的组件。
例如，如下代码即为一种方法：
首页 (index.html)
<!DOCTYPE html>
<html lang="zh">
<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)
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或类似的库（例如...）。
🐜 用 HMPL.js 实现基于服务器的方法与上述方法不同的是，该模块不会允许机器人索引页面，但你可以把它连接到任何网页应用或网站，比如 WordPress、Vue.js、Tilda、Next.js，无论你想要连接到哪里。
使用这个模块的操作看起来像这样：
index.html（首页）
<main id="app"></main>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/json5/dist/index.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
点击进入全屏模式 点击退出全屏模式
client.js（客户端的 JavaScript 文件）
const templateFn = hmpl.compile(
`<div>
<button data-action="increment" id="btn">点击!</button>
<div>点击数: {{ 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渲染时加载组件。
其他一些可以帮助减少包大小的方法
在这里，如果我们不涉及与服务器的交互，而是仅仅进行一般的网页应用操作，那么下面的方法也可以帮助减小包的体积。
1. 🔗 删除不必要的依赖在开发 web 应用的过程中，你需要创建一些功能，于是下载不同的包来尝试，选择最适合任务的包。如果忘记删除它们，包的大小只会越来越大。或者，如果引入了一个巨大的模块来解决可以用普通 js 完成的任务，但实际上只用到了其中的一个函数，这也完全没有必要。
要分析未使用的软件包，你可以用下面这个软件包或类似的工具。
首先运行 `npm install depcheck`，然后使用 `depcheck /path/to/my/project` 检查你的项目。（`depcheck` 是一个工具，用于检查项目中的依赖项）点击全屏/退出全屏
或者...
（此处可以添加具体示例，例如：“你想要咖啡或者茶？”）
运行 `npx depcheck` 命令全屏进入，退出全屏
这个模块虽然不被支持，但你仍然可以用它来分析依赖并找出未使用的。不过，使用时要小心，因为有些看起来未被使用的依赖实际上很重要，没有它们某些功能就不能运作。这也需要注意。
您还可以通过以下命令调用npm自带的功能。
(执行 \`npm prune\` 命令，这会移除项目中未引用的依赖包)点击全屏观看按钮进入全屏，点击退出全屏按钮退出全屏
此命令会移除“不必要的”包。如果指定了包名，则只会移除与指定名称匹配的包。
2. 📷 在项目中使用较小的媒体素材这可能是最简单也是最明显的建议之一。如果你的项目中有一个视频文件大小相当于整个网站应用，那么这个视频文件将很难与项目中的其他文件一起使用，比如使用 git clone 时。
这种做法对图片来说非常棒，可以每张图片节省几MB，且不会损失任何质量。现在，图片压缩工具非常容易做到这一点。
来看一看吧
此外，你还可以将图片格式从 png、jpg 转换成 webp。这也是一个很好的做法，经常被许多大型网站采用。
3. 使用 CDN这也是将模块从npm_modules迁移至外部环境的常用方式之一。
import { chunk } from "lodash"; // 从lodash导入chunk函数点击进入全屏模式，再点击退出
还是
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>点击这里全屏打开，点击这里全屏关闭
这有点像之前说的，不过意思稍微有点不一样。
4. 代码拆分其中一个最简单的拆分代码的方法是使用动态导入。在现代打包工具例如 Webpack 和 Vite 中，你可以轻松地这样写代码。
main.js
注：“main.js” 是主要的 JavaScript 文件。
document.getElementById('loadButton').addEventListener('click', () => {
import('./module.js')
.then(module => {
module.default();
})
.catch(err => {
console.error('模块加载出错：', err);
});
});点击全屏 退出全屏
我们不会立即加载该模块，而是在点击按钮时才加载。
你也可以启用代码块分割。这样做非常有用，它有助于将不同模块中的公共代码分离出来。
webpack.config.js
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
},
},
};点击这里全屏 点这里退出全屏
5.- 代码精简你可以通过在编译代码的过程中进行代码压缩来减小包的体积。这可能是你能用到的最有效的方法之一。
可以使用以下命令来压缩和优化JavaScript文件：
uglifyjs file.js -c toplevel,sequences=false切换到全屏模式 退出全屏
为此，你可以使用Uglify.js，这是一个最流行的代码压缩工具之一，比如Uglify.js。它也可以与打包工具配合使用，当然，如果没有默认包含，也可以和其他类似的工具一起使用。
✅ 结束语首先，从所有列出的中，我试图描述那些几乎适用于每个web应用的最通用和最常用的方法。这些方法是在设定此类任务时总是会被优先采用的。我也不想写一些关于DRY（Don’t Repeat Yourself）和KISS（Keep It Simple, Stupid）原则的愚蠢建议，这些原则在减少代码方面已经是显而易见的，我更想提供一些具体的、实用的建议。不过，无论如何，我希望这些方法能帮助你使网站变得更小更快！
非常感谢你读了这篇文章！
共同学习，写下你的评论
评论加载中...
作者其他优质文章
