如何优化vue项目首屏加载白屏(加载过慢)的问题

发现问题

昨天项目上线,访问线上地址整整加载了15秒,看了之后气的能砸电脑
在这里插入图片描述
在优化之后 首屏加载速度在1.2秒左右,当然还有优化空间,后期还可以考虑做个骨架屏,loading什么的提高用户体验
在这里插入图片描述

优化方案

优化之前下载webpack-bundle-analyzer

webpack-bundle-analyzer 是 webpack的可视化资源分析工具

  1. npm i webpack-bundle-analyzer
  2. 配置vue.config.js
chainWebpack(config){
	config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
  1. 执行 npm run build --report 即可 浏览器会自动打开一个页面,如下图所示
    具体还是看你package.json怎么配置的 像我就要执行 执行npm run build:prod --report
    在这里插入图片描述
    可以看到echarts,element 占了很多空间
    下面是我优化完了之后的,其实还有优化空间啊 ali-oss mqtt都没有改成cdn引入
    在这里插入图片描述

1.使用CDN减小代码体积加快请求速度

使用CDN主要解决两个问题:
1. `打包时间太长、打包后代码体积太大,请求慢`
2. `服务器网络不稳带宽不高,使用cdn可以回避服务器带宽问题`

我们将vue,vue-router,vuex,axios,echarts,element,moment使用CDN资源引入。国内的CDN服务推荐使用 bootCDN

  1. 在index.html里引入线上cdn
    在这里插入图片描述
  2. 在vue.config.js配置 配置是为了在加载的时候,引用cdn资源 而不是node_modules里的包
configureWebpack:{
	externals: {
      'echarts': 'echarts',
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'moment': 'moment',
      'element-ui': 'ELEMENT'
    },
}
  1. 注释main.js里的import
    在这里插入图片描述

2.开启gzip压缩

  1. npm i compression-webpack-plugin@1.1.12 --save-dev 新版本有问题的话下载1.1.12版本
  2. 配置vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin')
configureWebpack:{
	plugins:[
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        // test: /\.js$|\.html$|\.json$|\.css/,
        test: /\.js$|\.json$|\.css/,
        threshold: 10240, // 只有大小大于该值的资源会被处理
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        // deleteOriginalAssets: true // 删除原文件
      })
    ],
}
  1. 需要nginx服务器,更改nginx.conf文件 加在如图所示位置
# 开启gzip。
gzip on
# 开启后如果能找到 .gz 文件,直接返回该文件,不会启用服务端压缩。
gzip_static on
# 文件大于指定 size 才压缩,以 kb 为单位。
gzip_min_length 1;
# 用于识别http协议的版本,早期的浏览器不支持gzip压缩,用户会看到乱码,所以为了支持前期版本加了此选项,目前此项基本可以忽略
gzip_http_version 1.1;
# 压缩级别,1-9,值越大压缩比越大,但更加占用 CPU,且压缩效率越来越低。
gzip_comp_level 9;
# 压缩的文件类型。
gzip_types text/css application/javascript application/json;
root /dist;

在这里插入图片描述

3.路由懒加载

这个大家应该都知道吧,用到什么路由加载什么路由,不一次性加载所有路由

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login'),
    hidden: true
  },

  {
    path: '/auth-redirect',
    component: () => import('@/views/login/auth-redirect'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
]

4.图片放在oss上,不放在项目的assets文件夹下

对象存储(oss)提供内置的CDN集成,可以缓存资产以加快页面加载速度。对象存储非常适合存储静态资源,例如,用于存储用户定义的内容:图像和电影,存储备份文件和日志。
更换项目里的图片路径,为线上地址即可

5.去除ScourpMap文件

配置一下vue.config.js即可

productionSourceMap: false,//去除.map文件

6.压缩代码,移除console.log

  1. npm i uglifyjs-webpack-plugin@1.1.1 --save-dev
  2. 配置vue.config.js
const isProduction = process.env.NODE_ENV === 'production';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
chainWebpack(config) {
    const plugins = [];
    if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  }
  • 9
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值