Vue包大小优化的实现(从1.72M到94K)

清疚 2022-10-30 07:23 35阅读 0赞

一、背景  
最近做了一个网站，uidea，是用来辅助独立开发者做一些 UI 设计的，当时只管开发，等部署完以后，发现访问速度堪忧  
毕竟是个小水管服务器，相比提高带宽，还是先看看代码上能不能优化一下，性价比更高  
这个是优化前的包大小，这家伙都上 1.72 M 了，小水管加载时间直接往 3s 以上走了，臣妾扛不住啊

二、目标  
这必须得优化一下，优化前得大致定一下目标，目标又需要指标来衡量，所以定了两个指标：

页面加载时间不多说，至少得 1s 以内，越快越好  
包大小控制在 200k 以内  
为什么定这两个目标呢？首先页面加载时间是最终要解决的问题，那页面加载时间初步来看，影响因素有两个，网络和包大小，网络暂时缺钱没法升级，所以主要优化就集中在包大小上  
首先要定义什么是包大小，我这里主要指入口包大小，对应 Vue 就是 app.js 和 app.css，入口加载完页面至少可以展示了  
那包大小要优化到什么程度呢？  
一方面 vue-cli-service 建议不超过 244K，另一方面就是找对标，看看类似的网站包大小多少，那我们也有个参照，我选择的是 materialpalette，看了下他的包大小大概在 150k 左右，我的功能更复杂一些，所以取了两者中间的 200K 作为目标  
这里为什么要讲目标呢？因为目标其实是很重要的，老话也说有的放矢，没有目标，那执行的过程中很容易半途而废，或者只前进半步就终止了  
拿谈恋爱来说，如果你的目标是找个女朋友，那大概率找不到，但是如果你的目标是追到某个确定的女生（比如张三）做女朋友，那成功的概率就大大增加了，因为你可以去针对这个女生去做针对性的准备  
三、方案  
目标定了，然后就是定方案  
虽然咱第一次做 Web 的优化，但是之前有过安卓包大小优化的经验呀，道理总是相通的，所以第一时间想了下面几个策略

代码混淆  
资源放到 cdn，因为开发的时候图省事，资源放在 assets 下面，直接 require 引入了，这也是一个大头  
无用库删除，功能相近的库合并，只用到少部分功能的库，看看能否自己实现  
gzip 压缩  
第三方库也放到 cdn  
1 - 3 三个优化方案是首先想到的，然后网上搜了下 Vue 对应的优化策略，又增加了后面两个  
还有一些其他方案，比如路由懒加载，但是因为这个网站主要内容都集中在首页，所以这个就没考虑了（好东西虽多，但因地制宜最好）  
所以一共定了 5 个优化策略，下面就开干  
四、执行  
1. 代码混淆  
代码混淆就不多说了，一方面节省包大小，一方面还能增加一些反编译的难度，直接网上搜了 Vue 混淆配置（毕竟要站在巨人肩膀上），试了下确实好使，配置如下  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
const CompressionWebpackPlugin = require('compression-webpack-plugin');  
module.exports = \{  
configureWebpack: (config) => \{  
// 引入uglifyjs-webpack-plugin  
let UglifyPlugin = require('uglifyjs-webpack-plugin');  
  
if (process.env.NODE\_ENV == 'production') \{  
// 压缩混淆  
config.mode = 'production'  
// 将每个依赖包打包成单独的js文件  
let optimization = \{  
minimizer: \[new UglifyPlugin(\{  
uglifyOptions: \{  
warnings: false,  
compress: \{  
drop\_console: true,  
drop\_debugger: false,  
pure\_funcs: \['console.log'\]  
\}  
\}  
\})\]  
\}  
Object.assign(config, \{  
optimization  
\})  
\} else \{  
// 为开发环境修改配置  
config.mode = 'development'  
\}  
\}  
\}  
\}  
2. 资源放到 cdn  
这一步也容易做，资源全部都放到阿里云 oss 上，几分钟搞定  
3. 无用库删除  
这一步花了不少时间，因为开发的时候图省事，很多库直接 github 上一搜，yarn add 引入就完事了，现在需要细细的再拆分一下  
在打包命令后面加 --report 看一下打包的状态  
1  
yarn build --report

首先是去掉 ElementUi（gzip 压缩后大约 158k），开发的时候 ElementUi 和 Vuetify 混用了，其实只留一个 Vuetify 就够了，然后对界面做一些小小的改造就完成了  
然后是 lodash，只用到了其中几个方法，但是他的整个体积不小，gzip 压缩后大概 25k，于是找了 lodash 源码，打算把用到的几个方法抽出来，但是 lodash 代码嵌套、引用太深了，不太抽，干脆直接干掉这个库，找了几个更纯粹的实现做了替换，主要时间花在了读 lodash 源码上  
再然后就是 vuescroll，在实现滚动条样式自定义的时候，偷懒直接用了这个库，发现这个库体积还是不小的，gzip 压缩后将近 20k，直接干掉，自己写一下样式吧（这件事告诉我们，现在偷的懒，以后会以别的方式还回来的 0\_0）  
这样就干掉了几个大头库  
4. gzip 压缩  
这个是网上找的解决方案，直接在 vue.config.js 里加点配置，然后 nginx 里也需要做一下对应的配置  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
// vue.config.js  
module.exports = \{  
configureWebpack: (config) => \{  
if (process.env.NODE\_ENV == 'production') \{  
// ...  
// gzip  
config.plugins.push(new CompressionWebpackPlugin(\{  
algorithm: 'gzip',  
test: /\\.js$|\\.html$|\\.json$|\\.css/,  
threshold: 10240,  
minRatio: 0.8  
\}))  
\}  
// ...  
\}  
\}  
// nginx 直接开启下面的配置  
gzip\_static on;  
这样打包以后，会生成 .gz 文件，nginx 会自动使用 .gz 文件  
5. 第三方库放到 cdn  
这里主要是处理 Vuetify 这个库，毕竟 gzip 以后也有将近 50k 的大小，放到 cdn 上会快一些  
首先是打包配置中去掉 Vuetify  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
module.exports = \{  
// ...  
configureWebpack: (config) => \{  
if (process.env.NODE\_ENV == 'production') \{  
// 第三方库不打包，使用 cdn  
config.externals = \{  
vuetify: 'Vuetify'  
\}  
\} else \{  
// 为开发环境修改配置  
config.mode = 'development'  
config.externals = \{  
vuetify: 'Vuetify'  
\}  
\}  
\}  
\}  
然后在 index.html 里手动加载 vuetify css 和 js  
1  
2  
<link href="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.css" rel="external nofollow" rel="stylesheet">  
<script src="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.js"></script>  
这里其实有一些更好的方式，可以通过 webpack 参数传给 index.html，通过 ejs 引入，现在比较简单，这里就没做了