问题：当vue项目发布后，在浏览器第一次打开访问vue项目地址，导致第一次打开页面时间太慢，好久都没打开，一直在加载
借鉴博客：https://www.cnblogs.com/zyulike/p/11190012.html
解决办法：
1、去掉编译文件中的map文件 2、通过vue-router路由懒加载 3、使用CDN，可以减少代码体积，加快请求速度
4、使用compression-webpack-plugin插件，修改配置文件，production环境下对超过10k的文件进行压缩，nginx部署时开启gzip
1、去掉编译文件中的map文件
1.1、没去.map文件之前，打包后的js目录：有两个很大的.map文件
1.2、在vue.config.js文件中配置代码：
productionSourceMap: false, //去除vue打包后js目录下生成的.map文件，用于加速生产环境构建
1.3、打包后的结果：两个比较大的.map文件不存在了
2、vue-router路由懒加载
vue-router路由懒加载就是访问其他页面的时候才加载，进入当前页面其他页面先不加载，可以减少耗时。
懒加载路由配置：
非懒加载路由配置：
3、使用CDN
具体操作：
第一步：修改vue.config.js配置
// 修改vue.config.js 分离不常用代码库 module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === "production") { config.externals = { // 不会被打包的库 'vue': 'Vue', 'vue-router': 'VueRouter', 'moment': 'moment' } } } }
或：如上面那种报错不起作用，试试另一种写法配置：
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'ElementUI': 'ELEMENT',
'axios': 'axios',
}
}
第二步：找到项目的public文件夹的/index.html中引入CDN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-manage-system</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
如果报错提示：element未定义，解决办法：vue.js需要在element-ui之前引入，所以vue.js也要改为CDN的引入方式
要删除原先在js中的import引入，不删除的话，项目还是会从node_modules中引入资源文件
4、关于compression-webpack-plugin插件的配置，和nginx的gzip配置
借鉴博客：https://blog.csdn.net/qq_31677507/article/details/102742196 （比较有用）
借鉴博客：https://blog.csdn.net/qq_37600506/article/details/111835555
借鉴博客：https://blog.csdn.net/weixin_46190955/article/details/116496108?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&utm_relevant_index=1
4.1、vue项目安装compression-webpack-plugin插件
cnpm install compression-webpack-plugin
最新的compression-webpack-plugin插件运行起来可能会报错，找不到什么乱七八糟的属性：
解决办法：把此插件的版本降低
卸载原来的版本
npm uninstall compression-webpack-plugin
安装5.0.1版本 npm i compression-webpack-plugin@5.0.1
因为使用的是jenkins自动打包，打包的时候报错没有找到compression-webpack-plugin，所以在项目的package.json配置文件里手动指定一下版本：
4.2、还要在vue.config.js文件中配置一下compression-webpack-plugin，内容如下：
const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
productionSourceMap: false, //去除vue打包后js目录下生成的.map文件，用于加速生产环境构建
configureWebpack:{
resolve:{
alias:{
'@':path.resolve(__dirname, './src'),
'@i':path.resolve(__dirname, './src/assets'),
}
},
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 下面是下载的插件的配置
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
minChunkSize: 100
})
]
},
}
4.3、最后nginx开启gzip压缩，nginx的default.conf配置文件加入gzip配置内容如下：上面的借鉴博客中的gzip配置有问题，我自己又在网上找了一个，最后打包测试成功
gzip on; gzip_min_length 1k; gzip_buffers 16 64k; gzip_http_version 1.1; gzip_comp_level 6; #1-9,为9的话最大消耗服务器内存以提高访问速度
gzip_types text/plain application/x-javascript text/css application/xml; gzip_vary on;
最后优化成功，浏览器删除历史记录后，第一次访问vue项目只花了1.7秒：谷歌浏览器
IE浏览器：
前端性能优化知识总结
1.减少http请求。如：合并css、js、
2.合理利用缓存功能。如：缓存常用图片和css、js资源
3.合理安排内容渲染顺序。如：css优先加载，js最后加载，部分资源按需加载
4.压缩合并资源。如：压缩图片和js、css资源
5.减少对cookie的使用。如：cookie会在服务器和浏览器之间传递，导致资源浪费
6.优化代码层面：如：尽量减少闭包和递归的使用，减少对DOM操作，避免嵌套循环和"死循环"，代码尽量低耦合高内聚，注意定时器的及时清理，能使用css完成的动画就不用js，
。