1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 首屏渲染优化性能优化

首屏渲染优化性能优化

时间:2023-03-18 17:11:27

相关推荐

首屏渲染优化性能优化

登录

首屏加载优化

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。