把我优化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 // 是否删除压缩的源文件
})
)
}
}
(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 undefined
compression-webpack-plugin版本问题
解决方法:
1.卸载
npm uninstall compression-webpack-plugin
2.安装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多。
虽然没有达到“秒开”,但比以前还是强了很多。