Vue 包大小优化

可莉 等级 620 0 1
标签: vuehttps前端

一、背景

最近做了一个网站,uidea,是用来辅助独立开发者做一些 UI 设计的,当时只管开发,等部署完以后,发现访问速度堪忧
毕竟是个小水管服务器,相比提高带宽,还是先看看代码上能不能优化一下,性价比更高

这个是优化前的包大小,这家伙都上 1.72 M 了,小水管加载时间直接往 3s 以上走了,臣妾扛不住啊
Vue 包大小优化

二、目标

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

  1. 页面加载时间不多说,至少得 1s 以内,越快越好
  2. 包大小控制在 200k 以内

为什么定这两个目标呢?首先页面加载时间是最终要解决的问题,那页面加载时间初步来看,影响因素有两个,网络和包大小,网络暂时缺钱没法升级,所以主要优化就集中在包大小上

首先要定义什么是包大小,我这里主要指入口包大小,对应 Vue 就是 app.js 和 app.css,入口加载完页面至少可以展示了

那包大小要优化到什么程度呢?

一方面 vue-cli-service 建议不超过 244K,另一方面就是找对标,看看类似的网站包大小多少,那我们也有个参照,我选择的是 materialpalette,看了下他的包大小大概在 150k 左右,我的功能更复杂一些,所以取了两者中间的 200K 作为目标

这里为什么要讲目标呢?因为目标其实是很重要的,老话也说有的放矢,没有目标,那执行的过程中很容易半途而废,或者只前进半步就终止了

拿谈恋爱来说,如果你的目标是找个女朋友,那大概率找不到,但是如果你的目标是追到某个确定的女生(比如张三)做女朋友,那成功的概率就大大增加了,因为你可以去针对这个女生去做针对性的准备

三、方案

目标定了,然后就是定方案

虽然咱第一次做 Web 的优化,但是之前有过安卓包大小优化的经验呀,道理总是相通的,所以第一时间想了下面几个策略

  1. 代码混淆
  2. 资源放到 cdn,因为开发的时候图省事,资源放在 assets 下面,直接 require 引入了,这也是一个大头
  3. 无用库删除,功能相近的库合并,只用到少部分功能的库,看看能否自己实现
  4. gzip 压缩
  5. 第三方库也放到 cdn

1 - 3 三个优化方案是首先想到的,然后网上搜了下 Vue 对应的优化策略,又增加了后面两个

还有一些其他方案,比如路由懒加载,但是因为这个网站主要内容都集中在首页,所以这个就没考虑了(好东西虽多,但因地制宜最好)

所以一共定了 5 个优化策略,下面就开干

四、执行

1. 代码混淆

代码混淆就不多说了,一方面节省包大小,一方面还能增加一些反编译的难度,直接网上搜了 Vue 混淆配置(毕竟要站在巨人肩膀上),试了下确实好使,配置如下

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 看一下打包的状态

yarn build --report 

Vue 包大小优化

首先是去掉 ElementUi(gzip 压缩后大约 158k),开发的时候 ElementUi 和 Vuetify 混用了,其实只留一个 Vuetify 就够了,然后对界面做一些小小的改造就完成了

然后是 lodash,只用到了其中几个方法,但是他的整个体积不小,gzip 压缩后大概 25k,于是找了 lodash 源码,打算把用到的几个方法抽出来,但是 lodash 代码嵌套、引用太深了,不太抽,干脆直接干掉这个库,找了几个更纯粹的实现做了替换,主要时间花在了读 lodash 源码上

再然后就是 vuescroll,在实现滚动条样式自定义的时候,偷懒直接用了这个库,发现这个库体积还是不小的,gzip 压缩后将近 20k,直接干掉,自己写一下样式吧(这件事告诉我们,现在偷的懒,以后会以别的方式还回来的 0_0)

这样就干掉了几个大头库

4. gzip 压缩

这个是网上找的解决方案,直接在 vue.config.js 里加点配置,然后 nginx 里也需要做一下对应的配置

// 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

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

<link href="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.js"></script> 

这里其实有一些更好的方式,可以通过 webpack 参数传给 index.html,通过 ejs 引入,现在比较简单,这里就没做了

五、效果

通过上面几个策略,最终包大小从 1.72 M 优化到 94k Vue 包大小优化

六、后续

总体看来,优化效果是明显的,但是还有后续可以做的事情:

  1. 更精细化优化,应该可以结合 webpack 做更深的定制化
  2. 对上面说到的 cdn 上的第三方库做整合,毕竟直接放在 index.html 里太散,并不是很好的项目结构,也不利于后面开发
  3. 对后续的代码开发做规范,比如三方库引用的规范、资源的引入规范等等,可以做的事情还是很多的
  4. 每次部署前的性能测试,主要看看页面加载速度是否达标

可以做的事情还很多,有时候做一件事,达成目标并没有结束,维持目标也是需要考虑的

本文转自 https://juejin.cn/post/6929839648542425102,如有侵权,请联系删除。

收藏
评论区

相关推荐

Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始
Vue 3 计划放弃支持 IE11
Vue.js 作者尤雨溪就 Vue 3 支持 IE11 的计划提交了新提案。提案摘要:1. Vue 3 将不会支持 IE11 2. 原定投入 Vue 3 IE11 支持的精力将投入给 2.7,移植 3.x 兼容的新功能,包括: Composition API \<script setup\ 以及其它新的单文件组件特性
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d
Vite使Vue CLI过时了吗?
![](https://oscimg.oschina.net/oscnet/b9aed6aa-9d14-4fd3-82b8-e1724221ee71.jpg) **文末福利资源更新** Vue生态系统中有一个名为Vite的新构建工具,它的开发服务器比Vue CLI快10-100倍。 这是否意味着Vue CLI已经过时了?在本文中,我将比较这两种构
10分钟阅读一篇关于Vue
![file](https://oscimg.oschina.net/oscnet/up-4f8ccb1755bb73c4ffe6a7ba91253ddc.jpg "file") Vue-cli Vue脚手架的基本用法,vue脚手架用于快速生成vue项目基础架构: 地址: https://cli.vuejs.org/zh/ 使用方式,安装3.x版本
Electron开发使用Vue Devtools
转自 \[[https://orchidflower.oschina.io/2017/03/29/Using-Vue-Devtools-in-Electron/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Forchidflower.oschina.io%2F2017%2F03%2F29
Go在GitHub开源项目
后台管理系统 [https://github.com/flipped-aurora/gin-vue-admin](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fflipped-aurora%2Fgin-vue-admin) Gin-vue-ad
VUE AntDesign DatePicker设置默认显示当前日期
1:main.js中引入依赖 import Vue from "vue"; import { DatePicker } from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; #设置中文 import moment from 'm
Vue CLI 3搭建vue+vuex 最全分析
一、介绍 ==== Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: **CLI**:`@vue/cli` 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) **CLI 服务**:`@vue/cli-service`是一个开发环境依赖。构建于 [we
Vue CLI 2.x搭建vue,目录最全分析
一、vue-cli介绍 =========== vue-cli是一个用于快速搭建vue项目的 脚手架。 二、vue-cli安装、更新 ============== 安装过nodeJs 、cnpm 后,全局安装vue-cli(以后其他项目可直接使用): cnpm install -g vue-cli 更新: cnpm update
Vue 做项目经验
Vue 做项目经验 ========= 首先需要知道最基本的东西是: Vue 项目打包:npm run build Vue生成在网页上看的端口:npm run dev 修改端口号的地方在: config文件夹下index.js文件port 改变首页面在main.js const routes = \[{   path: '/',   comp
Vue 全家桶
vue全家桶。 使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js 是一个JavaScript MVVM(Model-View-ViewModel)库,用于渐近式构建用户界面。它以数据驱动和组件化思想构建,采用自底向上增量开发的设计思想。相比Angular.js,Vue.js API更加简洁;
Vue 兼容 ie9 的全面解决方案
前言 -- **背景情况** * vue - 2.5.11 * vue-cli 使用模板 `webpack-simple` * http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 `vuejs` 本身,以及生态的官方核心插件(VueRouter、V
Vue 开发必须知道的 36 个技巧
![](https://oscimg.oschina.net/oscnet/b77f0c050deecad634f32cd1bb74d303512.jpg) 作者: 火狼 https://segmentfault.com/a/1190000020620972 关注Vue中文社区,每日精选好文 前言 ==
vue echarts vue
1、git地址 [https://github.com/ecomfe/vue-echarts](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fecomfe%2Fvue-echarts) 2、使用 (1)安装 npm install vue-echa