当你长时间进行一个项目时，你会发现添加的功能越多，web 应用就会变得越慢。虽然看起来添加一个 table，一个 button，或其他元素时，这些在真空中可能重量很大。结果，你可能会遇到一个不可接受的初始加载时间，可能超过10到30秒。
在这篇文章里，我想分享一些方法和小技巧，帮助你避免这些问题，让你的网站尽可能快地加载和减少文件体积。
🐜 使用 HMPL.js 实现基于服务器的方法与下面描述的方法不同，该模块不会允许机器人抓取页面，但你可以把它连接到任何网络应用，或者任何网站，比如WordPress、Vue.js、Tilda、Next.js等，或者你想要的任何地方。
使用这个模块工作大致是这样的：
首页.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/dompurify/dist/purify.min.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
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渲染过程中加载组件。
如果你想减小网页应用的体积，那么首先你需要从你所使用的底层平台入手。以下是以 Next.js 为例，但如果网站是自行编写的，那么方法会有所不同。
因此，首先，值得寻找如何配置相同的框架或库以获得更好的结果，例如通过调整一两个参数，如服务器响应缓存，或者图片插件——这些功能有时已经包含在配置中了，剩下的就是找到它们。
👀 从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>全屏模式，退出全屏
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渲染页面
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. 🔗 去掉不必要的依赖有时候，在开发 web 应用的过程中，你可能需要创建一些功能，于是会下载各种包，试一试，选择最合适的。忘了删除不再需要的包，相应的，包的大小只会越来越大。或者，如果为了完成一个本可以用普通的 js 就可以解决的任务而引入了一个庞大的模块，却只用了一个函数，这完全是多此一举。
要分析未使用的包的话，你可以使用例如下面这样的工具或类似的工具。
运行以下命令来安装和检查项目依赖项
npm install depcheck
depcheck /path/to/my/project切换到全屏 切换出全屏
或如何？
运行 `npx depcheck` 可以检查项目的依赖情况。切换到全屏模式，退出全屏
此模块虽然不被支持，但仍可让你分析依赖项并识别未使用的依赖项。但是，你需要谨慎使用，因为有些看起来未被使用的依赖项，实际上某些模块可能无法正常工作——这一点也需要留意。
您也可以通过运行以下命令来使用npm自带的功能。
在终端中运行以下命令: npm prune
进入全屏 退出全屏
这个命令会移除“不必要的”包。如果指定了包名，只会移除与指定名称匹配的包。
2. 📷 在项目中使用较小的媒体素材这也许是给你的最简单且最明显的建议之一。如果你的项目中有一个视频文件大小堪比整个项目，那么使用 git clone 操作会变得相当棘手。
这种方法非常适合处理图像，在不损失任何质量的情况下，每张图片可以节省几MB的空间。现在，很多在线压缩工具都能轻松做到这一点。
（点击可查看图片）
此外，你可以将图片格式从png、jpg转换成webp。这也是一种好的做法，在许多大型网站中被使用。
3. 📡 使用 CDN 加速这也是其中一种常见的方式，将模块从npm_modules转移到外部环境中。
import { chunk } from "lodash";点击进入全屏模式 点击退出全屏模式
还是
<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>这里我们引入了一个lodash的JavaScript库来帮助我们处理一些常见的数据操作任务。
全屏模式 退出全屏
这和之前说的有点像，但是意思有点不一样。
4. ✂️ 代码拆分（将代码拆分为更小的部分）最简单的方法之一就是通过动态加载来拆分代码。在现代构建工具如 Webpack 和 Vite 中，你可以轻松地这样操作。
main.js
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，这是一个最受欢迎的代码压缩工具之一。它也可以与打包器一起使用，当然，如果它或者类似的工具没有被默认包含的话。
✅ 总结首先，从列出的所有方法中，我试图描述那些几乎适用于每个Web应用程序的最通用的方法。这些方法很受欢迎，并且在处理这类任务时经常被采用。我也想避免提供关于DRY（Don't Repeat Yourself）和KISS（Keep It Simple, Stupid）原则的陈词滥调，因为这些原则在减少代码方面已经很明确，我更想提供一些具体的建议。但无论如何，我希望这些方法能帮助你的网站变得更小、更快速！
之类的
你可以在推特上关注作者哦！
感谢大家阅读这篇文章哦！❤️
共同学习，写下你的评论
评论加载中...
作者其他优质文章
