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

一、背景

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

二、目标

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

  • 页面加载时间不多说,至少得 1s 以内,越快越好
  • 包大小控制在 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

首先是去掉 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="external nofollow" rel="stylesheet">
<script src="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.js"></script>

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

五、效果

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

六、后续

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

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

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

到此这篇关于Vue包大小优化的实现(从1.72M到94K)的文章就介绍到这了,更多相关Vue包大小优化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue 实现CLI 3.0 + momentjs + lodash打包时优化

    在vue-cli 2.0时代,webpack的配置是有独立文件的,包含在build目录下,修改也比较方便 到vue-cli 3.0后,webpack配置被整合到vue-cli的配置中了,需要配置一些打包插件比较麻烦了,比如优化momentjs压缩包,使用webpack-bundle-analyzer等- 研究后发现vue-cli 3.0使用了chainWebpack来支持额外的插件配置,其实和2.0是差不多的 我们这里使用momentjs,lodash和webpack-bundle-analyz

  • Vue项目总结之webpack常规打包优化方案

    由于新建项目发版打包时间大概需要 30分钟 ,发版时 严重 拖慢 下班 时间,所以特意查看了相关文档来优化打包速度,争取早点下班,^_^. 分析打包文件 要优化,先分析.我们先要知道到底是哪里拖慢我们的打包速度呢? 打包后生成文件分析 可以利用 webpack-bundle-analyzer 插件来分析我们打包后生成的文件 安装 npm i webpack-bundle-analyzer -D 使用 修改 webpack.prod.conf.js 文件 const BundleAnalyzerP

  • 详解Vue打包优化之code spliting

    在http1的时代,比较常见的一种性能优化就是合并http的请求数量,通常我们会把许多js代码合并在一起,但是如果一个js包体积特别大的话对于性能提升来说就有点矫枉过正了.而如果我们对所有的代码进行合理的拆分,将首屏和非首屏的代码进行剥离,将业务代码和基础库代码进行拆分,在需要某段代码的时候再加载它,下次若再需要用则从缓存中读取,一来可以更好地使用浏览器缓存,再者就是可以提高首屏加载速度,很好提升用户的体验. 核心思想 业务代码和基础库的分离 这个其实很好理解,业务代码通常更新迭代很频繁,而基础

  • vue-cli webpack2项目打包优化分享

    减小文件搜索范围 配置 resolve.modules Webpack的resolve.modules配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' 这样不是相对.也不是绝对路径的写法时,会去 node_modules 目录下找.但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules 的全路径:同样,对于别名(`alias)的配置

  • 浅谈vue项目打包优化策略

    使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载 这是首先可以优化的点.如果频繁使用了第三方组件/UI库,如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库,如果全部引入,项目体积非常大,这时可以按需引入组件. 示例如下: 1.1 element-ui 首先,安装 babel-plugin-component: npm install babe

  • vue webpack打包优化操作技巧

    临近春节,公司很多同事都提前回家过年,剩余人员根据禅道去修改bug,当bug修正完毕以后,我们需要重新打包给运维,上测试服给测试同事提测,但是由于项目本体比较庞大,所以打包时间太过漫长(二十五分钟以上:sob:),所以有了打包优化的想法(其实想法早就有了,但是因为平时工作计划比较充实,所以一直没有去完成这个工作),这次正好有时间,所以去重新考虑了这个问题! webpack是react项目标配的打包工具,和NPM搭配起来使用管理模块实在非常方便.   webapck 把所有的静态资源都看做是一个

  • 关于vue-cli 3配置打包优化要点(推荐)

    配置路由懒加载,封装了异步组件引入的方法,接收一个地址做参数 /** * 返回异步组件 * @tips 请注意页面只能挂载在views文件下,非此路径请勿使用 */ const AsyncComponentHook = (path: String): Function => (): any => { // 通过 webpack 的内联注释,设置模块名 let component = import(/* webpackChunkName: "view-[request]" *

  • Vue 打包体积优化方案小结

    Vue-cli3 打包体积优化方案 前言: 公司项目完成后 ,打包完成后有1.18MB,其实感觉还行了,但是还可以有优化的地方,对于咱们有精益求精(有没有还是有点*数的)的精神下再去优化,可以先在项目中安装webpack-bundle-analyzer可以看到各个文件的大小 npm install webpack-bundle-analyzer -save-dev 在vue.config.js中进行配置 module.exports = { chainWebpack: config => { c

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

    一.背景 最近做了一个网站,uidea,是用来辅助独立开发者做一些 UI 设计的,当时只管开发,等部署完以后,发现访问速度堪忧 毕竟是个小水管服务器,相比提高带宽,还是先看看代码上能不能优化一下,性价比更高 这个是优化前的包大小,这家伙都上 1.72 M 了,小水管加载时间直接往 3s 以上走了,臣妾扛不住啊 二.目标 这必须得优化一下,优化前得大致定一下目标,目标又需要指标来衡量,所以定了两个指标: 页面加载时间不多说,至少得 1s 以内,越快越好 包大小控制在 200k 以内 为什么定这两个

  • SpringBoot jar包大小优化问题及解决

    目录 这里提供两种解决方案 方案一:清理Maven依赖中无用依赖 方案二:外部引用 jar 包(立竿见影) 这里提供两种解决方案 清理 Maven 依赖中无用依赖( Unused declared dependencies ). 打包时排除所有 jar 依赖改为运行时外部引用. 方案一:清理Maven依赖中无用依赖 可以使用 mvn dependency:analyze 命令对项目进行分析,并以此作为参考来剔除无用依赖. 下面对图中的 Used undeclared dependencies f

  • 详解Vue SPA项目优化小记

    概述 之前做了一个React项目和Vue的项目,在做完后不加任何优化的情况下,这2个项目的首屏加载平均时间居然达到了20+s,好一点能进10s,差一点快30s,完全不能忍,优化势在必行,本文章记录下Vue项目的优化过程,React项目的优化后续补上. 上图是Vue项目的首页,整个项目由vue-cli搭建,主要分为4个模块,见页面左侧导航栏,总体代码量不算太大,组件的话总共50个左右吧,项目结构见下图,不算特别大的项目,但是首屏加载时间居然这么慢. 首先得确定到底是哪里导致了首屏渲染如此之慢?打开

  • vue终极性能优化方案(解决首页加载慢问题)

    目录 前言 1.路由懒加载 2.打包文件中去掉map文件 3.CDN引入第三方库 4.gzip打包 1.npmi-Dcompression-webpack-plugin 2.在vue.config.js中配置 3.在NGINX中配置 5.终极大招,预渲染 1.cnpminstallprerender-spa-plugin--save-dev 2.vue.config.js 3.router.js 4.main.js 总结 前言 用vue开发项目上线以后,发现首页加载速度非常慢,如果项目比较大,甚

  • vue 代码压缩优化方式

    目录 vue代码压缩优化 设置productionSourceMap为false 代码压缩 图片资源压缩 开启gzip压缩 vuecli3代码压缩混淆 现将混淆流程记录如下 vue代码压缩优化 设置productionSourceMap为false 如果不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建. 设置为false打包时候不会出现.map文件 module.exports = {     productionSourceMap: false } 代码压

  • splitChunks精细控制代码分割降低包大小

    目录 背景 问题测验 代码分割的三种方式 splitChunks 代码拆分 splitChunks 默认配置 理解 chunks 理解 maxInitialRequests 理解 maxAsyncRequests 理解 minChunks 理解 cache groups 总结 背景 前端小伙伴都知道,为了降低包大小,经常会把依赖的前端模块独立打包,比如把 vue.vue-router 打到一个单独的包 vendor 中.另外,常会将存在多个路由的复杂页面的每个页面都单独打一个包,只有访问某个页面

  • Android与iOS包体优化及一键自动打包脚本

    目录 系统信息 介绍 安卓APK优化包体大小 一.原理与介绍 二.Flutter代码配置 三.Android代码配置 四.多渠道调试与打包指令 安卓一键打包脚本 一.简单介绍 二.项目路径结构 三.脚本内容 四.脚本使用步骤 苹果优化包体大小 一.常规优化(分发到 App Store 或者 打Ad hoc 测试包) 二.非常规优化 1.Flutter导出IPA(共4步) 2.第一次优化包体大小(共5步) 3.第二次优化包体大小(共6步) 4.一些说明 苹果一键打包脚本 一.简单介绍 二.项目路径

  • vue使用mixins优化组件

    vue 提供了 mixins 这个 API,可以让我们将组件中的可复用功能抽取出来,放入 mixin 中,然后在组件中引入 mixin,可以让组件显得不再臃肿,提高了代码的可复用性. 如何理解 mixins 呢 ?我们可以将 mixins 理解成一个数组,数组中有单或多个 mixin,mixin 的本质就是一个 JS 对象,它可以有 data.created.methods 等等 vue 实例中拥有的所有属性,甚至可以在 mixins 中再次嵌套 mixins,It's amazing ! 举个

  • Vue项目打包优化实践指南(推荐!)

    目录 业务背景 项目打包时间分析方法 优化配置的基本思路 前置操作,先通过 webpack-bundle-analyzer 查看资源树 1.vue.config.js 文件中修改:productionSourceMap 为 false 2.针对首屏请求数进行优化—关闭 Prefetch,关闭 preload 一.采用路由懒加载 二.element-ui 组件按需加载 1.在 vue-cli3 项目中,如果没有 babel.config.js,则需要安装 Babel: 2.按照官网文档安装 3.b

随机推荐