把我优化vue载入速度的问题总结一下。
我的博客项目放在服务器后加载要18-20秒，其实这个问题拖了很久了，昨天才有时间处理一下。
之前以为是首页的mp4资源太大，但昨天看了后发现主要是vue打包后的js文件载入用了最多时间，如下图（优化前没截图，这个是优化后的。优化前大小是2m多，时间是十几秒）
带宽合格的服务器其实2m的文件用不到十几秒的，但我买的带宽是1Mbps （穷是原罪），速度太慢。
那么就从优化文件大小入手。
步骤：
1. 将路由改为懒加载，修改router文件
如下图，之前的写法是红色箭头所指。改为蓝色箭头写法即可。
文档：
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
此步骤做好后打包会发现js和css文件多了很多（如下图）
如果还想再优化速度，可以进行步骤2
2.使用gzip
（1）下载
npm install --save-dev compression-webpack-plugin（2）我的项目是vue-cli3创建，在vue.config.js中添加如下
configureWebpack: config => {
// 生产环境下使用gzip
if (process.env.NODE_ENV === 'production') {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 增加浏览器CPU（需要解压缩）， 减少网络传输量和带宽消耗 （需要衡量，一般小文件不需要压缩的）
// 图片和PDF文件不应该被压缩，因为他们已经是压缩的了，试着压缩他们会浪费CPU资源而且可能潜在增加文件大小。
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]', // asset -> filename
algorithm: 'gzip',
test: /\.(js|css)$/,
threshold: 10240, // 达到10kb的静态文件进行压缩 按字节计算
minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
deleteOriginalAssets: false // 是否删除压缩的源文件
})
)
}搜索这个 compression-webpack-plugin
我的在
（3）在服务器的nginx配置文件（即nginx.conf）中添加：
gzip on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;位置如下图
（4）然后别忘记重启一下nigix
./nginx -s reload（5）然后vue项目再打包下上传。
然后重点来了，下载完gzip再打包时可能会有些坑：
问题1
build时报错
Cannot read property ‘tapPromise‘ of undefinedcompression-webpack-plugin版本问题
解决方法：
1.卸载
npm uninstall compression-webpack-plugin2.安装5.01
npm i compression-webpack-plugin@5.0.1问题2
报错
npm ERR! Unexpected string in JSON at position 147364 while parsing xxx解决方法：
1.删除 package-lock.json 文件
2.重新 npm install
-------------------------------------------- END --------------------------------------------
一套下来 从18s > 6s多。
虽然没有达到“秒开”，但比以前还是强了很多。
————————————————
版权声明：本文为CSDN博主「真是个老机灵鬼」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41792345/article/details/120152261
主要是这篇非常给力
第一次打包vue的项目部署到服务器下时，发现初次加载特别的缓慢，将近20s页面才加载出来，完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案。
首先我们可以安装webpack-bundle-analyzer 插件，通过这个插件我们可以在打包的时候看到打包文件的大小，可以明显的看出哪些文件比较大。
解决方案1
1，去掉编译文件中map文件。在编译好后，我们会看到文件夹下有特别多的.map文件，这些文件主要是帮助我们线上调试代码，查看样式。所以为了避免部署包过大，通常都不生成这些文件。
在 config/index.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件 （文件大小 35MB–>10.5MB）
2，vue-router 路由懒加载
懒加载即组件的延迟加载，通常vue的页面在运行后进入都会有一个默认的页面，而其他页面只有在点击后才需要加载出来。使用懒加载可以将页面中的资源划分为多份，从而减少第一次加载的时候耗时。
懒加载路由配置：
非懒加载路由配置：
如图所示为通过懒加载后打包的js文件。而非懒加载的打包后一般只有一个app.js 文件。
解决方案2
使用CDN减小代码体积加快请求速度
为什么使用CDN
使用CDN主要解决两个问题：
打包时间太长、打包后代码体积太大，请求慢
服务器网络不稳带宽不高，使用cdn可以回避服务器带宽问题
具体步骤
1.在/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未定义，是因为Element依赖Vue，vue.js需要在element-ui之前引入，所以vue.js也要改为cnd的引入方式.
2.修改/build/webpack.base.conf.js中修改配置。给module.exports添加externals属性(详见https://webpack.docschina.org/configuration/externals/)，其中键是项目中引用的，值是所引用资源的名字。需要注意的是资源名需要查看所引用的JS源码，查看其中的全局变量是什么，例如element-ui的全局变量就说ELEMENT
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'ElementUI': 'ELEMENT',
'axios': 'axios',
}
}
3.删除原先的import
如果不删除原先的import，项目还是会从node_modules中引入资源。
也就是说不删的话，npm run build时候仍会将引用的资源一起打包，生成文件会大不少。所以我认为还是删了好。
如：
————————————————
版权声明：本文为CSDN博主「就是不掉头发」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sunqiang4/article/details/119303560