Vue 项目优化

1、字体优化

1.1 字体包压缩

使用 fontmin 这个库压缩字体包。（字体下载地址字体下载网，这个下载的苹方简-常规可以被格式化。）

const Fontmin = require('fontmin')

const srcPath = './path/*.ttf' // 字体源文件
const destPath = './path' // 输出路径
const text = 'text'

var fontmin = new Fontmin()
  .src(srcPath)
  .dest(destPath)
  .use(
    Fontmin.glyph({
      text: text,
      hinting: false // keep ttf hint info (fpgm, prep, cvt). default = true
    })
  )

// 执行
fontmin.run(function (err, files, stream) {
  if (err) {
    console.error(err) // 异常捕捉
  }
  console.log('done') // 成功
})

1.2 优化字体包加载前的文本隐藏 [from font-display 的用法]

@font-face 中使用 font-display 属性

/* style.css */
@font-face {
  font-family: 'test'; /* 所指定的字体名字将会被用于font或font-family属性 */
  /* 
    src描述符指定了包含字体数据的资源。
    远程字体文件位置的URL或者用户计算机上的字体名称，
    可以使用local语法通过名称指定用户的本地计算机上的字体。
    如果找不到该字体，将会尝试其他来源，直到找到它。
  */
  src: url('test.woff2') format('woff2');
  font-display: swap;
}

考虑兼容性，使用 js 判断字体包加载完毕后，添加字体设置。

// font.js
  if ('fontDisplay' in document.body.style === false) {
    if ('fonts' in document) {
      document.fonts.load('test')
      document.fonts.ready.then((fontFaceSet) => {
        document.documentElement.className += ' fonts-loaded' 
      })
    }
  }

1.3 字体包 preload

添加 preload-webpack-plugin 包

$ yarn add preload-webpack-plugin --dev

在 vue.config.js 中配置

// vue.config.js
const PreloadWebpackPlugin = require('preload-webpack-plugin')

module.exports = {
  configureWebpack: config => {
    return {
      plugins: [new PreloadWebpackPlugin({
        rel: 'preload',
        include: 'allAssets',
        as (entry) { // link as 属性
          if (/\.ttf$/.test(entry)) return 'font'
          if (/\.jpg$/.test(entry)) return 'image'
          return 'script'
        },
        fileWhitelist: [/\.ttf/, /banner[^-]*\.jpg/] // 白名单
      })]
    }
  }
}

2、图片使用懒加载

使用 vue-lazyload 库优化图片加载，滚动到某处再加载图片。

3、打包线上版本，使用 cdn 引入包

// --------------
// .env
// --------------
NODE_ENV === 'production'

// --------------
// vue.config.js
// --------------

const isProd = process.env.NODE_ENV === 'production'

const assetsCDN = {
  // webpack build externals
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    'vue-lazyload': 'VueLazyload',
  },
  css: ['//cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css'],
  js: [
    '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
    '//cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js',
    '//cdn.jsdelivr.net/npm/vue-lazyload@1.3.3/vue-lazyload.min.js',
  ],
}

module.exports = {
  configureWebpack: (config) => {
    if (isProd) {
      return {
        // resolve: {
        //   alias: {
        //     '@ant-design/icons/lib/dist$': resolve('./src/core/antd/icons.js'),
        //   },
        // },
        externals: assetsCDN.externals,
        // plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)],
      }
    }
  },

  chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
      args[0].title = process.env.VUE_APP_TITLE
      if (isProd) {
        args[0].cdn = assetsCDN
      }
      return args
    })
  },
}

<!-- index.html -->
...
<!-- require cdn assets css -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %> 
...
<!-- require cdn assets js -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script
  type="text/javascript"
  src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"
></script>
<% } %>

4、ant-design-vue 相关

4.1 打包后，icon 包体积过大

参考此 issue 作者的回答

4.2 打包后，moment 包体积过大

参考此优化方案 github

5、使用缓存

5.1 nginx 配置 last-modify 和 etag

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ttf)$
{
    expires      60d;
}
location ~ .*\.(js|css)?$
{
    expires      60d;
}

6、组件懒加载

6.1 使用 Intersection Observer 实现组件懒加载

主要使用了 Intersection Observer (MDN) 接口，提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。

// test.vue
<template>
  // ...
  <component-a v-if="ifCmpShow" ></component-a>
</template>
<script>
export default {
  data () {
    return {
      ifCmpShow: false
    }
  },
  mounted () {
    // 这里如果不等dom更新后执行，页面加载时就会触发 observe
   if ('IntersectionObserver' in window) {
      this.$nextTick(() => {
        this.lazyLoadContact()
      })
    } else {
      this.$nextTick(() => {
        this.ifCmpShow = true
      })
    }
  },
  method: {
    lazyLoadContact () {
      const intersectionObserver = new IntersectionObserver(entries => {
        if (entries[0].intersectionRatio <= 0) return
        if (!this.ifCmpShow) {
          this.ifCmpShow = true
        }
      })

      intersectionObserver.observe(this.$refs.experts.$el) // 参数必须是 dom
    }
  }
}
</script>