一、资源大小

一般来说，前端都会在打包的时候做资源大小的优化，资源类型包括 HTML、JavaScript、CSS、图片等。优化的方向包括：

1. 合理的对资源进行分包。

首次渲染时只保留当前页面渲染需要的资源，将可以异步加载、延迟加载的资源拆离。通常我们会在代码编译打包的时候做处理，比如使用 Webpack 将代码拆到不同的 bundle 包中。

2. 移除不需要的代码。

我们项目中常常会引入许多开源代码，同时我们自己也会实现很多的工具方法，但是实际上并不是全部相关的代码都是最终需要执行的代码，所以我们可以在打包的时候移除不需要的代码。现在基本大多数的打包工具都提供了类似的能力，比如 Tree-shaking。

除此之外，如果我们的项目较大，使用和依赖了多个不同的仓库。如果在不同的代码仓库里，都依赖了同样的 npm 代码包，那么我们可能会遇到打包时引入多次同样的 npm 包的情况。一般来说，我们在管理依赖包的时候，可以使用peerDependency来进行管理，避免多次安装依赖、以及版本不一致导致的多次打包和安装等情况。

3. 资源压缩和合并。

代码压缩也常常是在打包阶段进行的，包括 JavaScript 和 CSS 等代码，在一些情况下也可以使用图片合并（雪碧图的生成）。通常也是使用的打包工具以及插件自带的压缩能力，开启压缩后的代码可能比较难定位，可以配合 Sorce Mapping 来进行问题定位。

除了打包时的压缩，我们在页面加载的时候也可以启用 HTTP 的 gzip 压缩，可以减少资源 HTTP 请求的耗时。

二、资源缓存

资源缓存的优化，其实更多时候跟我们的资源获取的链路有关，包括：

1.减少 DNS 查询时间，比如使用浏览器 DNS 缓存、计算机 DNS 缓存、服务器 DNS 缓存

2.合理地使用 CDN 资源，有效地减少网络请求耗时

3.对请求资源进行缓存，包括但不限于使用浏览器缓存、HTTP 缓存、后台缓存，比如使用 Service Worker、PWA 等技术

以上就是汉码未来今天给大家分享的文章，想了解更多关于前端的相关内容，可以登录汉码未来官网咨询，主打5人小班，全程面授，主打物联网嵌入式（人工智能）、Java全栈开发、鸿蒙应用开发、Linux云计算SRE工程师、C/C++、AI人工智能大模型算法、游戏开发、Web前端开发、Python大数据、PHP等学习进修，有专业的授课老师为你答疑解惑。