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

记录一下一些基础的优化处理方案😐（可能不全），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打开
使用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，只要是支持按需加载的都可以进行使用，部分框架使用方式可能有所不同

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


按需加载


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的配置
请求响应是就能够看见头Headers中是gzip


CDN加速

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

在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
本文链接：https://blog.amooos.com/2020041901/