Vue首页加载速度优化
问题描述
最近在搭建自己的博客,前端采用Vue技术,发现首页加载速度非常之慢,常常达到10S左右。虽然作为一个Java开发者,对前端技术不是特别了解,但是也实在无法忍受如此之慢的打开网页速度,遂开始优化之旅。
寻找原因
游览器的分析结果:vendor.xxxxx.js体积过于庞大,此文件为第三方插件库。
查找打包数据,发现该文件在打包时变提示体积过大【big】
解决方案一
加入GZIP打包,首先安装gzip
npm install -save gzip
在webpack.prod.conf.js加入如下代码
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
在index.js中加入如下代码
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
加入后重新打包进行测试,结果如图:
发现该文件体积大小减少100KB,然而加载速度还是慢。
解决方案二
方案一不能完美解决问题,又必须缩小该文件体积,方案二便是利用CND,直接外链第三方库,传统的HTML文件利用CDN不外乎在文件头部加入script连接,Vue也不例外。
首先在index.html加入需要引入的库:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>my-blog</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
<div id="app">
</div>
</body>
</html>
然后在webpack.base.conf.js中加入externals
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'jquery': 'jQuery',
'element-ui':'ELEMENT',
'vue': 'Vue'
},
......
在main.js中删除相应的Import和USE,重新打包,我们看到大小编程了288KB,这是由于没有把所有的依赖删完,因为有的依赖找不到相应CND站点
这时候加载时间降到了2S多,作为一个访问量不高的博客,在服务器为阿里云学生垃圾服务器的情况下,这个时间应该是可以接受了。
![](https://i-blog.csdnimg.cn/blog_migrate/8d1bee1327542d6173d80b4c0c9492e2.png)
总结
项目在优化的足够好的时候,网页是足以秒开的,在低并发情况下,制约网页速度的往往是前端工程。