Vue首页加载速度优化

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加入需要引入的库：

然后在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多，作为一个访问量不高的博客，在服务器为阿里云学生垃圾服务器的情况下，这个时间应该是可以接受了。

 总结

项目在优化的足够好的时候，网页是足以秒开的，在低并发情况下，制约网页速度的往往是前端工程。