资源的加载的时间快。

优化方向

  • 资源体积。
  • 资源数量。
  • 加载速度。
  • 加载的优先级。

资源体积

压缩

压缩算法：gzip， brotli。

vite-plugin-compression

使用 gzip 或者 brotli 来压缩资源。

资源拆分

将大文件(超过 2M) 拆成小文件。

去掉不用的代码

随着项目开发的时间越来越长，会积累很多不用的代码。

去掉一些非必需的包

有些包，体积挺大，但在业务中只用了该包少量的功能，考虑去掉。比如：

  • 用户引入了全量的 lodash，让其改成 lodash-es，方便 webpack 做 treeshaking。
  • 去掉仅为了把某个时间做格式化而引入的 moment。
  • 去掉仅为了查询某个元素的 jquery。

资源数量

资源合并

对小文件做合并。

vite-plugin-svg-icons

生成 SVG 雪碧图。

按需加载

unplugin-vue-components

On-demand components auto importing for Vue.

推荐阅读: 尤大推荐的神器unplugin-vue-components,解放双手!以后再也不用呆呆的手动引入(组件,ui(Element-ui)库,vue hooks等)。

加载速度

缓存策略

CDN

加载优先级

先加载首屏的内容。懒加载(按需加载)后面的内容。