Vue首评加载速度及白屏时间优化详解

前言

在当今互联网时代，网页的首评加载速度和白屏时间已经成为了评判网站质量和用户体验的重要指标之一。Vue作为一门专为构建交互式Web界面而设计的渐进式JavaScript框架，在进行项目开发时也需要考虑如何优化首评加载速度和白屏时间。本文旨在帮助Vue开发者做到此项优化。

背景

在进行Vue项目开发时，由于文档、组件和样式等资源会被打包成一份JS文件，所以静态资源加载压缩、公共库的CDN分发等技术手段对于首评加载速度和白屏时间的优化至关重要。

步骤

以下是优化Vue首评加载速度和白屏时间的步骤：

1. 抽离公共库，使用CDN

抽离公共库，使用CDN是优化Vue首评加载速度和白屏时间的常用做法。Vue本身依赖的vue.js文件、生命周期用到的mini-lifecycle.js文件以及组件渲染用到的compiler.js文件等文件完全可以放置在CDN上。

示例：使用CDN引入Vue.js文件

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. 异步加载

在Vue项目中，由于组件的引入，会存在与组件同步引入的依赖性静态资源等待全部加载完毕才能展示组件的情况，此时就需要进行静态资源的按需加载。Vue中提供的Vue异步组件功能的基本原理就是通过异步加载的方式实现组件的按需加载。

示例：异步加载组件

Vue.component('my-button', function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template: '<button>I am my-button component!</button>'
    })
  }, 1000)
})

3. 压缩和优化静态资源

静态资源的压缩和优化也是优化Vue首评加载速度和白屏时间必不可少的环节。可以使用Webpack等打包工具自带的相关插件对静态资源进行压缩和优化。

示例：使用Webpack插件进行静态资源优化

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  //...
  plugins: [
    new UglifyJsPlugin(),
    new MiniCssExtractPlugin()
  ]
}