文章目录

1. 首先打包后看看加载时间
2. vendor
- 2.1. 路由懒加载
- 2.2. (@vue/cli < 3.0.0) map、gzip、console.log
- 2.3. (@vue/cli < 3.0.0) CDN引入插件
- 2.4. (@vue/cli 3.0) 2.2 及 2.3 在*vue/cli3.0*下的优化方案
3. Gzip服务器配置
- 3.1 nginx重新编译
- 3.2 nginx配置更改
- 3.3 重启nginx
- 3.4 结果
4. 静态文件及资源文件
5. 打包分析
6. 进阶

1. 首先打包后看看加载时间

示例：vue项目
vue-cli: v2.9 (v3.0.0以上配置不同)，之后用v4.1重构了项目
server: CentOS7, nginx

令人窒息的36.1s

先做点有手就会的吧，图片视频等静态资源是造成网站臃肿的首要原因，压缩static或public下的资源

记得先清除浏览器缓存

可以看到，还差得远

2. vendor

参考博文：关于vue 项目页面打包后首次页面加载特别缓慢的原因及解决方案

2.1. 路由懒加载

参见vue官方文档：Vue路由懒加载

import Vue from 'vue'
import Router from 'vue-router'
const _import = file => () =>import('@/views/' + file + '.vue');Vue.use(Router)export default new Router({routes: [{path: '/',name: 'home',component: _import('home') // @/views/home.vue文件},...
}

2.2. (@vue/cli < 3.0.0) map、gzip、console.log

vue/cli 3.0以上的处理往下翻

去掉编译文件中map文件、使用gzip压缩、打包时去掉console.log

/config/index.js (@vue/cli < 3.0.0)

...
build: {...productionSourceMap: false, // mapproductionGzip: true, // true 开启Gzip压缩
}
...

/build/webpack.prod.conf.js

坑：
先查看自己是否安装了依赖compression-webpack-plugin，没有需先安装：

npm install --save-dev compression-webpack-plugin

结果：

2.3. (@vue/cli < 3.0.0) CDN引入插件

webpack打包忽略插件，采用CDN方式引入
参考博文：Webpack如何引入CDN链接来优化编译后的体积

首先引入CDN链接到项目index.html，位置如下：

<body><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/element-ui/lib/index.js"></script>
</body>

添加externals属性

vue-cli 2(webpack.base.confi.js):

module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js'},externals: {'vue': 'Vue','element-ui': 'ElementUI'},...
}

注释main.js中的import

//import Vue from 'vue'
//import ElementUI from 'element-ui';
//import 'element-ui/lib/theme-chalk/index.css';//Vue.use(ElementUI);

看看效果吧：

vendor.js加载时间史诗级减少

2.4. (@vue/cli 3.0) 2.2 及 2.3 在vue/cli3.0下的优化方案

同2.3一样，CDN导入脚本（仅配置不同）
根目录下创建vue配置文件，vue.config.js配置如下：

const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
module.exports = {configureWebpack:{externals: {'vue': 'Vue','element-ui': 'ElementUI','axios': 'axios','xlsx': 'XLSX','echarts': 'echarts','vue-router': 'VueRouter'},plugins: [new CompressionWebpackPlugin({filename: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),threshold: 10240,minRatio: 0.8}),new UglifyJsPlugin({uglifyOptions: {compress: {drop_debugger: true,drop_console: true,pure_funcs: ["console.log"]}},sourceMap: false,parallel: true})]},productionSourceMap: false
}

3. Gzip服务器配置

上图中可以看到，
0.7ef6…js文件加载时间过长

2.1中已经压缩过了，但服务器的nginx配置尚未更改。
具体方法参考这篇博文：Vue cli 3.0 gzip压缩并部署到Nginx上(gzip_static)

3.1 nginx重新编译

本人服务器OS是Centos7, nginx安装在root/nginx-1.16.1下

cd到该目录下，更改配置：

./configure --with-http_gzip_static_module

重新编译安装nginx

make install

3.2 nginx配置更改

配置文件，(/usr/local/nginx/conf下)

http {...gzip  on;gzip_static on;gzip_buffers 4 16k;gzip_comp_level 5;gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;...
}

3.3 重启nginx

3.4 结果

4. 静态文件及资源文件

4秒的首屏加载时间已经快可以接受了，最后通过对静态文件和图片视频等资源文件进行更改或压缩。

图片视频再怎么压缩也是有限的，可以选择将资源文件上传到阿里云的对象存储OSS，很便宜，也可用其它平台。

LightHouse测试如下：

图片压缩工具：

squoosh
BeJSON
美图秀秀网页版

视频压缩:

小丸工具箱

视频裁剪:

LosslessCut

5. 打包分析

示例打包发布后的首屏加载时间稳定在4s，无可奈何之。
更新vue/cli至4.0+后，重构代码，vue ui可打开vue图形化工具管理项目，优化配置更加方便了，而且，vue ui中执行打包任务可分析打包内容。此时，发现xlsx这个包超大。CDN方式导入xlsx，externals中加入xlsx。首屏加载时间稳定在2.3s左右。

6. 进阶

前面进行了一些基础的性能优化，让网站性能从“糟糕”变成“有待提高”，进一步的提高需要从多方面进行。

参考文章：如何打造安全、快速、无障碍的网站？

优秀网站必须关注的健康指标 | Web Vitals 闪亮登场

如何进行 web 性能监控？

网站性能检测插件（Google Chrome）：

Lighthouse
web vitals

vue项目优化 - 网站首屏加载时间相关推荐

接手同事vue项目两个月的血和泪，关于vue项目性能优化，缩短首屏加载时间
最近接手了别人做的vue项目,项目跑起来后,有些页面很卡,首屏加载也慢,打包速度也慢.于是,研究了很久vue的项目性能优化,下面我将从两个部分来详解vue项目的性能优化: 代码优化 webpack打包 ...
VUE 首屏加载时间优化
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...
浅谈Vue单页应用首屏加载速度优化方案
心语:最不会利用时间的人,最会抱怨时间不够趁着五一放假,刚好最近天气也是不好,.所以抽出一点时间写一点东西,也算是不辜负这个美好的假期吧!小编也祝愿大家五一快乐,玩得愉快哈随着各大前端框架的诞生以 ...
vue spa php,在Vue中有关SPA首屏加载优化（详细教程）
本篇文章主要介绍了浅谈Vue SPA 首屏加载优化实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧写在前面本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一 ...
VUE单页应用首屏加载速度优化方案
单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案使用CDN资源,减小服务器带宽压力路由懒加载将一些静态js css放到其他地方(如OSS),减小服务器压力按需加 ...
Vue - 网站首屏加载等待动画（极简解决方案）
效果图前言解决白屏等待方案非常多,个人而言评判好坏的标准即用最少最简单的代码实现相同的功能. 在 Vue 项目中,网站加载时会显示自定义动画(CSS),当文件加载完毕且页面显示时自动移除动画. ...
vue单页应用首屏加载速度慢如何解决
首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间. 一.加载慢的原因在页面渲染的过程,导致加载速度慢的因素可能如下: 网络延时问 ...
vue项目优化之按需加载组件-使用webpack require.ensure
使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash]. ...
web的首屏加载优化
白屏加载和首屏加载时间的区别白屏时间是指浏览器从响应用户输入网址地址,到浏览器开始显示内容的时间. 首屏时间是指浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完 ...

vue项目优化 - 网站首屏加载时间