基于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 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
PHP安全上传图片的方法
2015/03/21 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
splice slice区别
2006/10/09 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
Three.js基础部分学习
2017/01/08 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
js实现简单页面全屏
2019/09/17 Javascript
Python实用日期时间处理方法汇总
2015/05/09 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Python管理Windows服务小脚本
2018/03/12 Python
详解python中的Turtle函数库
2018/11/19 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
python Shapely使用指南详解
2020/02/18 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
工程资料员岗位职责
2014/03/10 职场文书
卫生巾广告词
2014/03/18 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书