10 秒 到 2秒 超简单的Vue项目首屏优化实践
Posted 前端知识营地
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了10 秒 到 2秒 超简单的Vue项目首屏优化实践相关的知识，希望对你有一定的参考价值。
10 秒 到 2秒 超简单的Vue项目首屏优化实践
摘要
性能优化是一个比较大的知识点，包含但不限于性能优化的工具，技术手段和流程，本文主要从「压缩文件体积，减少请求次数」方面入手，优化Vue项目的首屏加载时间，实现首屏加载10秒到2秒的提升。主要技术栈如下：「Vue cli3」 「Element UI」
首屏优化
Vue 是典型的单页应用，首次加载耗时多，因此优化Vue项目首屏加载对于提升用户体验非常重要。下图展示了一个糟糕的首屏加载案列，白屏时间长达10余秒，简直让人无法忍受！
❝❞ 糟糕的首屏加载
如何优化
方法一: 压缩文件体积
压缩文件体积操作简单粗暴，效果却非常明显。常见的压缩文件体积的方法如下：
-
压缩图片体积，设置合适的图片尺寸 -
多图页面采用雪碧图（尤其是小图片） -
开启GZIP压缩 -
关闭源码视图，清除 console.log日志
上述方案可根据具体情况考虑，比如我手下的项目主要是Vue+Element UI搭建的后台管理系统，并未涉及图片，因此只需采取方案３和方案４即可。
开启GZIP压缩
-
「Vue项目前端配置GZIP」
-
安装 CompressionPlugin
npm i compression-webpack-plugin -D
-
在 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: "[path].gz[query]",
algorithm:"gzip",
test:productionGzipExtensions, //所有匹配此{RegExp}的资产都会被处理
threshold:512, // 只处理大于此大小的资产。以字节为单位
minRatio:0.8, //只有压缩好这个比率的资产才能被处理
deleteOriginalAssets:false //是否删除原资源
}))
}
}
以上是关于10 秒 到 2秒 超简单的Vue项目首屏优化实践的主要内容，如果未能解决你的问题，请参考以下文章CompressionPlugin的主要配置和说明如上,此外需要特别注意的是deleteOriginalAssets是否删除原资源,这里建议设置为false即压缩资源和原始资源共存,以保证当客户端或者服务端不支持gzip压缩时能够返回原始资源,保障应用正常运行.否则可能出现「404错误」.更多配置请参见