参考：
vue项目首次加载特别慢需要怎么配置？
1.看看你的依赖包是不是全局引入的，改为组件内按需引入，可大大降低加载时长。或者将组件引入方式改为cdn引入。需要注意的是，两种引入方式不能共存。
2.看network，点击ALL，看看哪些文件加载时间长，针对性的优化，静态文件压缩、js文件切片等
3.使用compression-webpack-plugin插件，修改配置文件，production环境下对超过10k的文件进行压缩，nginx部署时开启gzip
Vue项目部署后页面加载首次很慢的优化方案
发布前端项目时因chunk-vendors过大导致首屏加载太慢，Vue Build时chunk-vendors的优化方案
webpack Vue前端项目打包后生成的chunk-vendors文件过大，导致加载太慢,生成的js文件过多，http请求太频繁问题解决
vue项目打包优化之-productionSourceMap设置
Vue-cli3 项目配置 Vue.config.js
vue之解析vue.config.js中的配置项之publicPath
Vue runtime-compiler与runtime-only
vue-router路由懒加载（解决vue项目首次加载慢）
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
Vue CLI3 开启gzip压缩
Nginx开启Gzip详解
按需引入element-ui
src\main.js
// 按需引入element-ui
import "./plugins/element"
// 全局引入
// Vue.use(Element)
src\plugins\element.js
import Vue from "vue"
import {
Button, Avatar, Link, Divider, Timeline, TimelineItem, Card, Pagination,
Container, Main, Header, Form, FormItem, Input, MessageBox
} from "element-ui"
Vue.use(Button)
Vue.use(Avatar)
Vue.use(Link)
Vue.use(Divider)
Vue.use(Timeline)
Vue.use(TimelineItem)
Vue.use(Card)
Vue.use(Pagination)
Vue.use(Container)
Vue.use(Main)
Vue.use(Header)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
// 踩坑了, 我以为是Alert组件
Vue.prototype.$alert = MessageBox
重新构建一下
npm run build
发现好像并没什么卵用，静态文件还是那么大。
关闭生成sourceMap文件
source map 直译过来就是资源地图。所以，source map的作用就是定位。source map定位的时浏览器控制台输出语句在项目文件的位置。
编辑项目根路径下vue.config.js文件，将productionSourceMap设置为false
module.exports = {
// 部署应用包时的基本URL, 默认"/", 示例http://localhost:80/index
// 若改为/app, http://localhost:80/app/index
publicPath: "/",
// 输出文件目录
outputDir: 'dist',
// eslint-loader是否在保存的时候检查
lintOnSave: false,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// 从main.js看本项目应该是runtime-only, "render: h => h(App)"
// runtimeCompiler: false,
}
重新构建一下
npm run build
小了！dist小了好多~
路由懒加载
src\router\index.js
把路由都改成懒加载
const routes = [
{
path: '/',
name: 'Index',
// 我猜通过name跳转路由会经过Blogs的懒加载
redirect: {name: "Blogs"} // 或者redirect: Blogs
// redirect: resolve => require(["../views/Blogs"], resolve) // error, redirect不能指向懒加载
},
{
path: '/blogs',
name: 'Blogs',
// component: Blogs
// 路由懒加载
component: resolve => require(["../views/Blogs"], resolve)
},
{
path: '/login',
name: 'Login',
// component: Login
component: resolve => require(["../views/Login"], resolve)
},
{
path: '/blog/add',
name: 'BlogAdd',
// component: BlogEdit,
component: resolve => require(["../views/BlogEdit"], resolve),
meta: {
requireAuth: true
}
},
{
path: '/blog/:blogId',
name: 'BlogDetail',
// component: BlogDetail,
component: resolve => require(["../views/BlogDetail"], resolve)
},
{
path: '/blog/:blogId/edit',
name: 'BlogEdit',
// component: BlogEdit,
component: resolve => require(["../views/BlogEdit"], resolve),
meta: {
requireAuth: true
}
}
]
使用gzip压缩
安装gz打包插件 compression-webpack-plugin
# npm i -D compression-webpack-plugin
npm install --save-dev compression-webpack-plugin
修改项目根路径下vue.config.js
// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require("compression-webpack-plugin")
// 定义压缩文件类型
const productionGzipExtensions = ["js", "css"]
module.exports = {
// 添加Webpack配置
configureWebpack: config => {
return {
plugins: [
new CompressionWebpackPlugin({
algorithm: "gzip",
// 匹配文件名
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
// 对超过10K的数据进行压缩
threshold: 10240,
// 是否删除原文件
deleteOriginalAssets: false,
minRatio: 0.8
})
]
}
}
}
修改nginx配置，打开gzip
在server下添加
# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小
gzip_buffers 16 64k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 9;
gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 禁用IE6 gzip
gzip_disable "MSIE [1-6]\.";
或者执行
cp /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf_bak && cat >> /etc/nginx/conf.d/default.conf < gzip on; gzip_min_length 1k; gzip_buffers 16 64k; gzip_http_version 1.1; gzip_comp_level 9; gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\."; EOF 重新加载nginx配置 nginx -s reload 访问项目，网络中检查是否成功开启gzip
