基于vue和react的spa进行按需加载的实现方法


Posted in Javascript onSeptember 29, 2018

基于vue和react的spa进行按需加载

由于最近打算将所有的管理系统采用同一套登陆方法,然后在登陆后进行系统的切换选择,不需要每个系统都去重新登陆一次,所以前端这边思考将所有的系统用一套spa的应用进行构建,但是各个系统的合并之后,打包后的代码应该是相当大的,单页需要一次性加载所有系统的资源,显得不合实际,所以打算将不同系统的资源进行分离,再选择后在加载该系统的相应资源。自己发现这个业务和每个系统的路由比较类似,因此将系统的配置基于vue-router或者react-router的基础进行按需加载处理。因此自己了解了一下按需加载的应用和配置方案。

基于该业务大家有其他解决方案欢迎交流( _O_ )

按需加载

随着单页应用的发展,整个系统的所有功能都集合在一个页面,该页面一次性加载所有的资源,随着系统的不断扩展,因此所加载的资源会不断的增大,虽然经过压缩处理,大大的减小了资源的内容量,但是不能从本质上减小资源内容的增多。

其实我们的模块对应不同的资源,就类似之前所做的多页系统,不同的页面加载对应的资源文件,所以可以参考之前的的多页系统的做法,在单页系统中根据不同的模块加载其对应的资源文件。就是用户当前需要用什么功能就只加载这个功能对应的代码,也就是所谓的按需加载。

如何按需加载

在单页应用做按需加载,一般采用以下原则

  • 把整个系统划分成一个个小功能,再按照功能的相关程度划分为几类。
  • 把每一类合并为一个Chunk,按需加载对应的Chunk
  • 对于首屏看到的内容直接放到入口Chunk中,以降低网页首次加载资源的个数
  • 对于其他的模块可以做按需加载。

被分割出去的代码的加载需要一定的机制去触发,也就是当用户即将操作到对应的功能时再去加载。被分割出去的代码的加载时机需要开发者根据自己系统的需求去衡量确定。
因为被分割出去的代码加载也需要一定的时间,所以可以提前做预加载处理。

import()

在开始下面的案例之前先了解一下import(),这里的import()不同于引入模块的import xxx from 'xxx',这里的import是指一个动态加载模块的函数,传入的参数就是相应的模块,但是import()会返回一个Promise对象,因此可以在import()完成后根据其状态进行处理。

//eg
import('/component/details').then(mod=>{
  console.log(mod)
},error=>{
  console.log(error)
})

vue按需加载的应用

1.模块分割

根据自己系统的情况,个人根据vue-router的模块来进行分割,

//roter配置的分割代码
import Vue from 'vue'
import Router from 'vue-router'
const listnav=()=> import('@/components/listnav')
const adminav=()=> import('@/components/adminav')
Vue.use(Router)
const router = new Router({
  routes:[{
    path:'/listnav',
    name:'listnav',
    component:listnav
  },
  {
    path:'/adminav',
    name:'adminav',
    component:adminav
  }
  ]
})
export default router

2.webpack输出文件配置

//webpack.base.conf.js
moudle.exports = {
  entry:{
    app:'./src/main.js'
  },
  output:{
    path:"../dist",
    filename:'js/[name].js',
    chunkFilename:'js/[name].js'
  }
}

react按需加载应用

1,模块分割

同样模块分割可采用react-router进行划分

//router配置分割代码
import React, {PureComponent, Component ,createElement} from 'react';
import {HashRouter as Router, Route,Link,withRouter} from 'react-router-dom';
import Home from "../component/home"
function getAsyncComponent(load) {
 return class AsyncComponent extends PureComponent {
  constructor(props) {
   super(props);
  }
  componentDidMount() {
   // 在高阶组件 DidMount 时才去执行网络加载步骤
   load().then(({default: component}) => {
   // 代码加载成功,获取到了代码导出的值,调用 setState 通知高阶组件重新渲染子组件
    this.setState({
     component,
    })
   });
  }
  render() {
   const {component} = this.state || {};
   // component 是 React.Component 类型,需要通过 React.createElement 生产一个组件实例
   return component ? createElement(component) : null;
  }
 }
}
const Routes = () =>(
  <HashRouter>
    <Route path="/home/:test" exact component={Home}/>
    <Route path='/details/:id' component={getAsyncComponent(
     // 异步加载函数,异步地加载 details组件
     () => import('../component/details')
    )}/>
  </HashRouter>
)
export default Routers;

2.webpack输出文件配置

//webpack.base.config.js
module.exports = {
  entry:{
    main: "../src/index.js", //入口文件
  },
  output:{
    path:"../dist",//出口文件
    filename:"js/[name].js",
    chunkFilename:"js/[name].js",
    publicPath: ''
  }
}

3.按需加载组件中的props传递

在按需加载划分后,按需加载的组件不能接收到传递来的props,因此不能通过this.props.match.params来获取router配置时所带入的参数。

解决方法利用react-router中的withRouter

可以在按需加载的组件中进行配置处理

//component/details.js
import React, { Component } from 'react';
import {withRouter} from 'react-router-dom';
class Details extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    console.log(this.props)
    return (
      <div></div>
    )
  }
}
export default withRouter(Details);

参考链接

vue-router路由懒加载 [ https://router.vuejs.org/zh/guide/advanced/lazy-loading.html]

React按需加载[ http://webpack.wuhaolin.cn/4%E4%BC%98%E5%8C%96/4-12%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD.html]

总结

以上所述是小编给大家介绍的基于vue和react的spa进行按需加载的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 图片轮换效果
Jul 29 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 #Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 #Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 #Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 #Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 #Javascript
对vue中v-if的常见使用方法详解
Sep 28 #Javascript
总结javascript三元运算符知识点
Sep 28 #Javascript
You might like
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
悬浮广告方法日常收集整理
2016/03/18 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
PyTorch基本数据类型(一)
2019/05/22 Python
python实现淘宝购物系统
2019/10/25 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
迎元旦广播稿
2014/02/22 职场文书
交通事故协议书范本
2014/11/18 职场文书
先进个人申报材料
2014/12/30 职场文书
物业保洁员管理制度
2015/08/05 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫