专栏首页Java技术大杂烩Vue加载优化,速度提高一倍。

Vue加载优化,速度提高一倍。

前言

之前做的一个Vue项目,流程大概是这这样的:从公众号进入,由外系统获取用户的openid等信息,然后再跳转到项目首页进行加载初始化操作。

业务最近反应进入首页很慢,于是大致排查了下,由于外系统需要去微信获取用户授权,用户的的openid,调用定位接口获取位置等信息,想着会不会是他们的问题,经过沟通,他们也是按照微信的接口文档进行操作,没有什么优化的空间,于是想着能不能提高我们首页的加载速度,百度一番,果然有相应的优化方法,

主要有以下几个方法:

  1. 打包的时候不生成 「.map」 文件。
  2. 打包的时候生成 gzip 文件,部署的时候,让 「nginx」直接读取 gzip 文件。
  3. 路由加载的时候采用「懒加载模式」
  4. 首页较大的图片适当的进行压缩。
  5. 三方库采用「CDN」的方式引入。

由于「CDN」的方式改动较多,所以这次优化没有采用该方法,而是采用了其他四种方法,在测试环境上进行测试加载速度提高了一倍,加载时间从4秒减少到2秒,在生产上网络较好应该要快些。下面来依次介绍下这几种方法的具体操作。

分析文件大小

在开始操作具体的优化方法之前,先来分析下哪些代码文件比较大,较大的文件可以进行压缩,使用 webpack-bundle-analyzer 来进行分析。

  1. 首先执行 「npm install cross-env --save-dev」 安装 cross-env 依赖。
  2. package.json 文件的 scripts 下面加上:
"analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build"

如下图所示:

  1. 在项目的根目录下执行「npm run analyze」 命令,执行之后,在浏览器上会自动打开一个页面,显示项目具体的文件及大小,如下图:

可以看到,项目中vendor.js文件最大,为 184.9 KB,该文件是Vue打包的时候自动生成的;通过该方法可以看到哪些 js 是我们没有使用的或者可以优化的,如果没有使用可以进行删除。

此外,把鼠标移到某个文件上面,还可以看到提示如果采用 gzip 压缩后的大小,比如vendor.js提示如果采用 gzip 进行压缩,压缩后的大小为61.26 KB,文件变小了,加载速度自然就快了嘛。

优化之前

先来看看优化之前的加载耗时情况:

可以看到:

  1. 总耗时 4.33 秒。
  2. app.css 文件大小为 1.1 MB,耗时2.42秒。
  3. vendor.js文件大小为434 KB,耗时1.26秒。
  4. app.js文件大小144 KB,耗时598毫秒。
  5. 一张 png 图片大小347 KB,耗时1.51秒。

到后台查数据的耗时反而很小,225毫秒。

开始优化

接下来,开始按照文章开篇的办法进行操作。

方法一:不生成 .map 文件

一般我们上生产的代码都会经过压缩,去空格,babel编译转化。然而压缩转化之后的代码和源代码之间的差异很大,当出现问题的时候会造成无法 DEBUG的问题,而编译后的 .map 文件主要是我们用来进行错误定位的。

了解了.map文件作用之后,我们在本地开发测试的时候可以使用.map来进行调试,上生产了之后,bug基本修改完毕,所以在编译打包的时候可以不生成.map文件。

在编译打包的时候,.map文件的生成是由 config/index.js文件的 「productionSourceMap」属性来控制的,为true的时候,会生成.map文件,为false的时候,不会生成.map文件,默认为true

所以我们把该属性设置为 false,编译打包的时候就不会生成.map文件了。

方法二:采用 gzip 压缩

还记得在文章开篇提到的用webpack-bundle-analyzer来分析文件大小吗,把鼠标移到某个文件上面,会提示现在文件的大小是多少,gzip压缩之后文件的大小,

要想进行 gzip压缩,首先在编译打包的时候,要生成.gz文件,然后 nginx 配置需要把 gzip模式 打开,访问项目的时候,自动会找到 .gz 的文件.

  1. 首先安装压缩插件,在项目根目录下执行如下命令安装:
npm install --save-dev compression-webpack-plugin
  1. 然后把 config/index.js文件的 「productionGzip」属性设置为true

图片中注释也写清楚了,设置为true之前先执行上述命令安装插件。

  1. build/webpack.prod.conf.js文件中的asset改为filename:

经过上面一系列操作之后,执行 npm run build 命令打包,此时在 dist 下会生成很多的 .gz文件,会比压缩之前的文件小了很多。

4. 现在生成了 .gz文件之后,还需要配置 nginx 开启 gzip 模块,访问项目的时候,自动会找到 .gz 的文件。nginx 配置如下:

http{
 gzip on;
 gzip_disable "msie6";
 gzip_vary on;
 gzip_proxied any;
 gzip_comp_level 8;
 gzip_buffers 16 8k;
 gzip_min_length 100; 
 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}

「======有坑=======」

这里有一点要注意,安装 compression-webpack-plugin 插件之前,先到 package.json文件中看下你项目的 webpack的版本是多少,目前最新版需要运行在webpack4.0以上,如果你的webpack的版本号是3.x的,则安装compression-webpack-plugin 的时候,需要安装1.x的版本。

我之前也是直接执行上面的命令安装,这样安装的是最新的版本,最新版本则要求webpack的版本在 4.0 以上,而我的webpack则是 3.6 的,所以我卸载了再重新指定安装了 1.1.12 版本的。命令如下:

npm install --save-dev compression-webpack-plugin@1.1.12

方法三:路由采用懒加载模式

路由的懒加载模式可以解决首次加载资源过多导致的速度缓慢问题:vue-router支持WebPack内置的异步模块加载系统。所以,那些使用较少的路由组件不必打包进bundles里,只需要在路由被访问时按需加载即可。

之前项目上采用的是非懒加载模式,即如下写法:

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/views/index'
import userList from '@/views/userList'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
      path: '/c',
      name: 'chargeTypeList',
      component: userList
    }
  ]
})

优化的时候,把它改为赖加载模式,即如下写法:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: resolve => require(['@/views/index'], resolve)
    },
    {
      path: '/c',
      name: 'chargeTypeList',
      component: resolve => require(['@/views/userList'], resolve)
    }
  ]
})

方法四:较大图片进行压缩

在文章开头说的优化之前的加载耗时中,有张图片是 png格式的,大小为347 KB,耗时1.51秒:

优化的办法就是进行图片的压缩,改为 jpg的,大小为 199 KB,最后耗时 241 毫秒。

总结

通过上述的几个方法优化之后,首页的加载耗时情况如下所示:

可以看到:

  1. 总耗时 1.75 秒。
  2. app.css 文件大小为 300 KB,耗时887毫秒。
  3. vendor.js文件大小为131 KB,耗时610毫秒。
  4. app.js文件大小30.7 KB,耗时342毫秒。
  5. 图片大小119 KB,耗时241毫秒。

在测试环境上多次测试后,平均下来,首页的加载速度从4秒左右提高到2秒左右。

「完」

本文分享自微信公众号 - Java技术大杂烩(tsmyk0715),作者:TSMYK

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spring 事务使用详解

    什么是事务?根据 维基百科事务 介绍,数据库事务(简称:事务)是数据库管理系统执行过程中的一个逻辑单位,由一个有限的数据库操作序列构成。简单来说,事务就是将一系...

    Java技术大杂烩
  • Spring 事务提交回滚源码解析

    在上篇文章 Spring 事务初始化源码分析 中分析了 Spring 事务初始化的一个过程,当初始化完成后,Spring 是如何去获取事务,当目标方法异常后,...

    Java技术大杂烩
  • Mybatis 类型转换源码分析

    JDBC 提供的数据类型和Java的数据类型并不是完全对应的,当 Mybatis 在解析 SQL ,使用 PreparedStatement 来为 SQL 设置...

    Java技术大杂烩
  • 【golang】调优工具 pprof

    Golang 提供了 pprof 包(runtime/pprof)用于输出运行时的 profiling 数据,这些数据可以被 pprof 工具(或者 go to...

    李海彬
  • 解决img父元素高度多出3px

      结果运行之后发现,不管是在移动端还是pc端,都会出现这种问题。刚开始以为是父元素初始化了margin和padding的原因,排查css无果,又怀疑是html...

    csxiaoyao
  • 干货 | Windows取证分析基础知识大全,赶快收藏!

    想要做好取证分析工作,工具和技术只是辅助,思路才是核心和重点。本文将详细分享Microsoft Windows操作系统的基础数字取证知识,了解数据的存放位置和对...

    HACK学习
  • 华为发布:5G时代十大应用场景白皮书(附下载)

    与前几代移动网络相比,5G网络的能力将有飞跃发展。例如,下行峰值数据速率可达20Gbps,而上行峰值数据速率可能超过10Gbps;此外,5G还将大大降低时延及提...

    辉哥
  • WEB前端响应式布局之BootStarp使用

    1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaSc...

    杨校
  • 前端基础-Bootstrap

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    cwl_java
  • MyBatis 源代码阅读笔记 1 基于XML配置的代码编写 mybatis-config.xml

    MyBatis 是一款优秀的持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集...

    一个会写诗的程序员

扫码关注云+社区

领取腾讯云代金券