Vue及Ant-Design-Pro打包首屏优化

Author Avatar
Amos
发表:2020-04-19 21:42:00
修改:2022-05-11 01:05:21

记录一下一些基础的优化处理方案😐(可能不全),Ant-Design-Pro的Vue版本快速地搭建好首屏之后,发现首次启动速度奇慢无比,经过优化之后能大大改善。

主要体积从7.07MB优化至2.72MB(Gzip压缩后422.2KB)
首次加载从9秒左右提升至2秒左右

当前环境:

名称 版本
NodeJS V10.0 +
Vue V2.0
Vue-cli V3.0 +
Ant-Design-Pro-Vue V2.1.0(具体的环境和依赖


🎐 首先看效果

优化前

打包之后发现vendor.js占了6.57MB首次加载大约需要请求9秒才完毕,而其中使用率只占了63.9%,是主要影响性能的根源。

webpack-bundle-analyzer插件 打包后查看各个bundle体积占比图

优化前

加载呈现时间(受网络影响,估算时间)

优化前

使用率(红色代表已使用,青色代表未使用)

优化前


优化后

vendor.js体积优化到2.29MB,首次加载大约需要请求2秒完成,
相较之前体积减少4.28MB,加载快7秒,整体速度优化大约80%
当然还有很多的优化空间,比如用Gzip压缩后只有422.2KB

webpack-bundle-analyzer插件 打包后查看各个bundle体积占比图

优化后

加载呈现时间(受网络影响,估算时间)

优化后


🥓 思路

大致可以参考下面几点去进行简单的优化

  • 检查原因(为什么慢?网络?冗余?没用的依赖?)

    • 打包分析 webpack-bundle-analyzer 插件
    • Chrome 性能分析(Network、Coverage)等
    • 检查自身代码组件冗余等……
  • 优化方法

    • 删除未使用的依赖以及代码冗余
    • productionSourceMap配置
    • 路由懒加载
    • AntDesign按需加载
    • Gzip压缩
    • CDN加速
    • 视觉优化(加载动画、骨架屏等)


一、检查原因

打包分析 webpack-bundle-analyzer 插件

1.首先安装 webpack-bundle-analyzer

npm install webpack-bundle-analyzer –save-dev

2.在vue-config.js中添加分析工具

module.exports = {
  chainWebpack: (config) => {
    /* 添加分析工具 */
    if (process.env.NODE_ENV === 'production') {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        .end()
      config.plugins.delete('prefetch')
    } else {
    }
  }
}

3.编写完成代码后,打包进行分析。

npm run build –report

4.打包完成后会启动页面,一般是http://127.0.0.1:8888/,进入就可以看见分析,具体分析是否有过于庞大、未使用的依赖、组件等。

打包分析


Chrome 性能分析

启动项目网页,按F12打开
使用NetworkCoverage等工具作为参考,分析大致可能出现的问题,比如过多未使用的依赖或者代码冗余等。

Network
Coverage


二、优化方法

删除未使用的依赖以及代码冗余

根据上方检查原因处安装好webpack-bundle-analyzer插件
分析出过多未使用的依赖或者代码冗余等 进行删除

示例:
在使用Ant-Design-Pro-Vue中,发现AntV(图表库)占的大小足足有3.22MB的大小,加上项目中不会使用图表库,果断删除掉。
优化好代码冗余、组件等,总共减少4.28MB,满足~

优化前


productionSourceMap配置

productionSourceMap简单来说,就是一个可以在打包后生成一堆Map文件,帮助在压缩打包后辅助检查项目错误(错误具体在哪个地方),这东西不仅会增加体积,而且在生产环境中会暴露很多信息,直接false

修改vue-config.js配置

module.exports = {
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度
}


路由懒加载

通过声明以函数的形式动态引入,就可以把各自的路由文件分别打包,只有在解析给定的路由时,才会下载路由对应的组件,优化性能的同时,也会增加整体包的体积(视情况使用)

具体可以查看官方文档Vue-Router路由懒加载

{
  path: 'home',
  name: 'home',
  component: () => import(/* webpackChunkName: "home" */ '@/views/website/home/Home'),
  meta: { title: '首页', keepAlive: false, permission: [ 'website' ] }
}

在动态import()代码处添加注释webpackChunkName告诉webpack打包后的Chunk的名称(注释中的内容很重要,不能省掉),打包后的name就是home,最终打包后就会生成独立的home.js

路由懒加载


AntDesign按需加载

不只是AntDesign,只要是支持按需加载的都可以进行使用,部分框架使用方式可能有所不同

如下示例只引入需要的框架组件:

AntDesign按需加载

按需加载

AntDesign按需加载


Gzip压缩

做了以上的优化之后,我们还可以进行Gzip压缩一下,可以极大的减少体积,当然需要配置服务器支持Gzip

安装compression-webpack-plugin

npm install compression-webpack-plugin

vue-config.js中添加配置

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']

configureWebpack: {
  // webpack plugins
  plugins: [
    // gzip压缩
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
      threshold: 10240,
      minRatio: 0.8
    })
  ]
}

打包后文件夹内容

Gzip

然后服务端再做出对应支持gzip的配置
请求响应是就能够看见头Headers中是gzip

Gzip


CDN加速

Vue、Vuex、Vue-Router、Axios等我们可以利用webpackexternals参数来配置,添加在生产环境中

vue-config.js中添加

const assetsCDN = {
  // webpack build externals
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios'
  },
  css: [],
  // https://unpkg.com/browse/vue@2.6.10/
  js: [
    '//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
    '//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
    '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
    '//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'
  ]
}

// vue.config.js
const vueConfig = {
  configureWebpack: {
    // webpack plugins
    // if prod, add externals
    externals: isProd ? assetsCDN.externals : {}
  },
  chainWebpack: (config) => {
    // if prod is on
    // assets require on cdn
    if (isProd) {
      config.plugin('html').tap(args => {
        args[0].cdn = assetsCDN
        return args
      })
    }

  }
}

module.exports = vueConfig

index.html中加入CDN

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>logo.png">
    <title>xxxx</title>
    <!-- 引入CSS的CDN -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
    <% } %>
  </head>
  <body>
    <noscript>
      <strong>请使用主流浏览器访问(谷歌浏览器、QQ浏览器等). Please enable it to continue.</strong>
    <!-- 引入JS的CDN -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %> 
  </body>
</html>


视觉优化

鲁迅说过:优化做好,动画来凑

在性能上做了基本的工作之后,还可以对用户体验进行增加。
比如:加载动画、骨架屏(AntDesign骨架屏)、占位符等……

转载请遵循 协议许可
本文所有内容严禁任何形式的盗用
本文作者:Amos Amos
本文链接:https://amoshk.top/2020041901/

评论
✒️ 支持 Markdown 格式
🖼️ 头像与邮箱绑定 Gravatar 服务
📬 邮箱会回复提醒(也许会在垃圾箱内)