记录优化 Vue 应用的首次加载速度

2020-01-13   3,981 次阅读


Halo 的管理端使用的是 Vue 来构建的,随之收到不少反馈后台加载过于缓慢,其主要原因就是打包好的 Vue 应用的静态资源又多又大,可能同时就几十个请求,这对于一些小水管的服务器来说简直是致命的打击。

Screen Shot 2020-01-13 at 12.13.02 PM

解决办法

使用公共 cdn,我们只需要把打包好的静态资源丢在公共 cdn 上引用就好了。那么如何优雅的上传到公共 cdn 呢?

创建 .env.env.development

.env

NODE_ENV=production
// VERSION 需要和 package.json 的 version 一致。
PUBLIC_PATH=https://cdn.jsdelivr.net/npm/halo-admin@VERSION/dist/

.env.development

NODE_ENV=development
PUBLIC_PATH=/

修改 vue.config.js

module.exports = {
	publicPath: process.env.PUBLIC_PATH,
}

打包测试

可以在 dist/index.html 看到,所有静态资源的根路径已经变成了 https://cdn.jsdelivr.net/npm/halo-admin@VERSION/dist/

上传到 npmjs

npm login

npm init

npm publish

说明

  1. 每次发布版本前,需要修改 .envpackage.json 的版本号,且需要保持一致。
  2. 发布到 npmjs 前,需要先 npm run build
  3. 经过这些操作之后,只需要部署 dist/index.html 即可,其他静态资源无用,因为是走的 jsdelivr 的 cdn。
  4. 只建议个人小应用使用这种方式,其他类型应用请自行斟酌,毕竟上传到 npmjs 会上传项目代码。
  5. 过程描述的过于简单,仅做为记录,非教程。

相关链接

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

Talk less, think more, do more.