记录一次Vue的网站优化过程

SPA的:按需加载,按需引入,分包,Gzip

优化结果

上图是优化前后全站加载速度的对比。快了六倍左右吧。还是没做彻底的。

组件按需加载

对于单页应用来说,默认的是将所有模块打包成一个文件,这样的坏处就是不管一个模块是不是即将用到都要在站点渲染之前加载,会浪费很多时间,增加首屏加载时间。俗称:明明需要的资源都下好了你为啥不给我渲染还要等别的!

这是可以用按需加载,即用一种特殊的写法,告诉打包器将文件分开,只在需要的时候才加载。具体的写法参考以下内容:

到目前为止对于小应用应该没有任何明显效果。

外部模块按需加载

这时候你会发现,只有你自己写的组件是分开了,按需加载了,那些引用的公共组建还是在一个vendor里面,如果里面有一个特别大,那你首屏加载肯定超级慢。这时候就要用webpack把vendor拆开。具体做法参照以下内容:

到目前为止,如果你不打开那些引用资源大的页面,那加载速度应该已经上去一点了。因为不用再加载不需要的内容。

按需引入

是的这个很重要,我作为新手的时候图方便,每次都是把包的所有内容一股脑都导入。这样做的结果就是,有八成的代码是用不上的。拿微软 Monaco Editor举例子可以看monaco-editor-samples/browser-esm-webpack-small

做完这些,我的网站从7.9MB下降到了3.4MB。

开启GZip压缩

简单理解就是,不要传原始文件,压缩一下再传。

压缩文件也是要花时间的!留意一下花掉的时间划算不划算!

以Nginx为例,可以在你的配置文件,或者网站配置文件中写如下内容。

1
2
3
4
5
6
7
8
9
gzip on;  # 开启gzip
gzip_min_length 1k; # 小于这个大小的文件不压缩
gzip_buffers 4 16k; # 缓存设定,不用改
gzip_http_version 1.1; # http版本,如果用改你会知道的
gzip_comp_level 9; # 压缩等级,数字越大压缩效果越好越吃CPU
gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; # 对这些文件启用压缩
gzip_vary on; # 不知道干啥的,反正这么写了
gzip_proxied any; # 我用了反向代理,所以要这么写,具体能不能写其他的,还不太清楚,这样写诗可以工作的
gzip_disable "MSIE [1-6]\."; # 不支持IE 6

这步下来我网站体积已经最小了。

压缩文件

还知道CDN的文件一般都是xxx.js和xxx.min.js。对的,这个过程就是把我们的打包文件也min一下,不过这个步骤一般框架都帮你弄好了。

Webpack Externals

用来引入外部cdn而不是用自己打包的库。具体用法可以看外部扩展(externals)。注意在配置文件中两个字符串的位置

总结

优化后速度明显快了不少,但是目前仍然不知道怎么按需用cdn加载。现在还只能二选一,按需或者cdn。有点迷。