Vue首页加载速度优化

最新推荐文章于 2024-06-30 19:03:10 发布

jundi-bestboy

最新推荐文章于 2024-06-30 19:03:10 发布

阅读量1.5w

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/haojie6091/article/details/81670154

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

总结

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

jundi-bestboy

关注

3
点赞
踩
27

收藏

觉得还不错? 一键收藏
1
评论
Vue首页加载速度优化

Vue首页加载速度优化问题描述最近在搭建自己的博客，前端采用Vue技术，发现首页加载速度非常之慢，常常达到10S左右。虽然作为一个Java开发者，对前端技术不是特别了解，但是也实在无法忍受如此之慢的打开网页速度，遂开始优化之旅。寻找原因游览器的分析结果：vendor.xxxxx.js体积过于庞大，此文件为第三方插件库。查找打包数据，发现该文件在打包时变提示体积过大【big】...
复制链接

扫一扫