js休眠5秒_10 秒 到 2秒 超简单的Vue项目首屏优化实践

10 秒 到 2秒 超简单的Vue项目首屏优化实践

摘要

性能优化是一个比较大的知识点，包含但不限于性能优化的工具，技术手段和流程，本文主要从「压缩文件体积，减少请求次数」方面入手，优化Vue项目的首屏加载时间，实现首屏加载10秒到2秒的提升。主要技术栈如下：「Vue cli3」 「Element UI」

首屏优化

Vue 是典型的单页应用，首次加载耗时多，因此优化Vue项目首屏加载对于提升用户体验非常重要。下图展示了一个糟糕的首屏加载案列，白屏时间长达10余秒，简直让人无法忍受！

❝

❞

如何优化

方法一: 压缩文件体积

压缩文件体积操作简单粗暴，效果却非常明显。常见的压缩文件体积的方法如下：

1. 压缩图片体积，设置合适的图片尺寸
2. 多图页面采用雪碧图（尤其是小图片）
3. 开启GZIP压缩
4. 关闭源码视图，清除console.log 日志

上述方案可根据具体情况考虑，比如我手下的项目主要是Vue+Element UI搭建的后台管理系统，并未涉及图片，因此只需采取方案３和方案４即可。

开启GZIP压缩

• 「Vue项目前端配置GZIP」

1. 安装CompressionPlugin

npm i compression-webpack-plugin -D

1. 在vue.config.js中进行配置

❝ vue cli3 将webpack配置和vue配置都集中在 vue.config.js中管理,这一点需要注意和vue cli2 的区别.如果没有 vue.config.js文件可自行在项目 「根目录下创建」
❞

const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i;

/** 开发环境 */
const DEV = process.env.NODE_ENV !== 'production';


module.exports = {
 /* vue.config.js支持webpack-chain写法 */
 chainWebpack: config =>{
  /* *******************************************
   *  
   * 开启GZIP压缩
   * 压缩前：4.4MB
   * 压缩后：1.7MB
   * @Author: mingyong.g
   * @Date: 2020-09-02 19:55:13
   * 
   ********************************************/
   if(!DEV){
    config.plugin('compressionPlugin')
    .use( new CompressionPlugin({
     filename: "[pa