VUE单页应用首屏加载优化技巧
2023-09-27 14:22:16 时间
单页应用会随着项目越大,导致首屏加载速度很慢!!!结合目前商城 h5 的首屏加载,以下给出几种优化方案:
- 使用 CDN 资源,减小服务器带宽压力
- 路由懒加载
- 按需加载三方资源,如 vant,建议按需引入 vant 中的组件
- 使用 nginx 开启 gzip 减小网络传输的流量大小
- 首页引入的自定义组件合并成一个分组返回,减少js请求
- app在启动页的时候预先加载首屏
- 利用localstorage缓存首屏数据,每次进入首页优先读取缓存数据,请求首屏接口后返回的数据再更新到缓存里
- 图片使用懒加载展示
- 其他不常用方案(淘宝的cdn的combo技术、br压缩代替gzip压缩)
一、使用 CDN 资源,减小服务器带宽压力
- 在 index.html 中引入 cdn 资源
...
<body>
<div id="app">
</div>
<!-- built files will be auto injected -->
<script src="https://cdn-h5.iauto360.cn/h5-mall/js/vue.min.js"></script>
<script src="https://cdn-h5.iauto360.cn/h5-mall/js/vue-router.min.js"></script>
<script src="https://cdn-h5.iauto360.cn/h5-mall/js/vue-lazyload.js"></script>
<script src="https://cdn-h5.iauto360.cn/h5-mall/js/axios.min.js"></script>
</body>
...
- 修改vue.config.js
module.exports = {
...
externals:{
"vue": "Vue",
'vue-router': 'VueRouter',
"vue-lazyload": "VueLazyload",
"axios": "axios",
},
...
}
二、路由懒加载
require.ensure 方式
const workCircle = r => require.ensure([], () => r(require('@/module/work-circle/Index')), 'workCircle')
const workCircleList = r => require.ensure([], () => r(require('@/module/work-circle/pa
import 方式
const workCircle = () => import('@/module/work-circle/Index')
三、按需加载三方资源,如 vant,建议按需引入 vant 中的组件
import {
Dialog
} from 'vant';
Vue.use(Dialog);
四、使用 nginx 开启 gzip 减小网络传输的流量大小
(1)服务端开启gzip压缩
(2)前端生产环境生成gzip,服务器可以直接读取生成的gzip文件,不需要服务器自己再去压缩文件返回给前端
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp(/\.(js|css|svg|woff|ttf|json|html)$/),
threshold: 10240,
minRatio: 0.8
}))
五、首页引入的自定义组件合并成一个分组返回,减少js请求
1、 es 提案的 import()
// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。
const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
2、webpack 提供的 require.ensure()
MBanner: resolve => require.ensure([],()=>resolve((require('../components/m-banner/banner'))), 'component.group1'),
MMenuigroup: resolve => require.ensure([],()=>resolve((require('../components/m_menu_i_group/m_menu_i_group'))), 'component.group1'),
MJoinr: resolve => require.ensure([],()=>resolve((require('../components/m_join_r/m_join_r'))), 'component.group1'),
MUsualr: resolve => require.ensure([],()=>resolve((require('../components/m_usual_r/m_usual_r'))), 'component.g
相关文章
- Vue 2升级 Vue 3初探小细节
- VUE axios POST 发送跨域 cros 问题
- 【Vue】Vue中【爷组件】与【子组件】通过【父组件】参数相互调用方法(props方式,图文+代码示例)
- 【Vue】Vue组件中事件和方法的混合(mixin)应用(图文+代码示例)
- 【Vue】通过v-for循环在html元素中渲染应用(图文+完整示例)
- Vue事件监听简单应用
- Vue: localStorage封装
- axios网络交互应用-Vue
- Vue.prototype详解
- vue引入导航守卫报错error: 'to' is defined but never used (no-unused-vars)
- 给 vue项目添加ESLint
- Vue 全家桶 + Electron 开发的一个跨三端的应用
- Vue之mixins理解与应用
- vue单页面应用刷新网页后vuex的state数据丢失的解决方案
- vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题
- vue基础---模板语法
- vue中引入awesomeswiper的方法以及编写轮播组件
- 浅析Vue3相关基础知识:Vue3应用配置、重写的v-model、emits 选项、getCurrentInstance()获取实例、采用mitt实现全局通讯、vue-router的新特性
- 浅析如何升级vue-cli以及使用npm卸载包时遇到问题:npm ERR! code EEXIST(npm ERR! File exists: D:Programnodejsnode_globalvue-list.cmd - npm ERR! Move it away, and try again.)
- 从源码角度浅析Vue常见知识点
- 类似Vue的mvvm虚拟语法树AST解析器,html转AST,很好用!
- 惊!把vue项目改成electron桌面端应用如此简单