首屏渲染优化性能优化

登录

首屏加载优化

webpack-bundle-analyzer 分析
优化前，加载时间15s，vendor.js 900k app.js 400k 背景图片900k

背景图片png改为jpg从400k变为40k

开启gzip压缩 vue.config.js中设置plugins gzip vendor.js和app.js缩小三分之一（nginx开启gzip gzip_static on;）

config.plugins.push(new CompressionWebpackPlugin({
	algorithm:'gzip',
	test:new RegExp('\\.('+productionGzipExtensions.join('|')+')'),
	threshold:10240,
	minRatio:0.8
}))

cdn加载资源

在vue项目中，通过npm安装到工程中所有的js,css文件，在编译时都会被打包进vendor.js，浏览器在加载该文件后才开始显示首屏。
index.html加载CDN资源
公共配置项webpack.base.conf.js 设置externals

externals:{
	'vue':'Vue',
	'vue-router':'VueRouter',
	'axios':'axios'
}

main.js中 注释掉
import Vue from ‘vue’，
// import iView from ‘iview’;
// import ‘…/theme/index.less’;

需要注意的是，通过 CDN 引入，在使用 VueRouter Vuex ElementUI 的时候要改下写法。CDN会把它们挂载到window上，因此不再使用Vue.use(xxx)

使用 CDN 的好处有以下几个方面

（1）加快打包速度。分离公共库以后，每次重新打包就不会再把这些打包进 vendors 文件中。

（2）CDN减轻自己服务器的访问压力，并且能实现资源的并行下载。浏览器对 src 资源的加载是并行的(执行是按照顺序的)。

路由懒加载

{
  path: 'buyerSummary',
  name: 'buyerSummary',
  component: () => import('VIEWS/buyer/buyerSummary/index'),
},

按需加载

elementui echarts lodash 只加载使用的模块

使用体积更小的第三方插件

moment 替换为dayjs