React-router 按需加载报错的问题

#1

使用React-router + webpack 做按需加载,基本和官网的Demo差不多,但是报错,

不知道哪里的错误,附上我的代码,

//route.js
const Com1 = {
    path:'com1',
    getComponent(nextState,cb){
        require.ensure([],(require)=>{
            return cb(null,require('../com1')).default
        })
    }
}
...
export default {
    Com1:Com1,
    Com2:Com2,
    Com3:Com3
}
import {Com1,Com2,Com3} from './Components/config/route';
const rootRoute = {
    path: '/',
    component: require('./Components/main').default,
    childRoutes:[{
        // path:'/',
        // component: require('./Components/main').default,
        childRoutes:[
            Com1,
            Com2,
            Com3,
        ]
    }]
}

let root = document.getElementById('app');
render(
    <Router history={hashHistory} routes={rootRoute}> </Router>
    // <Route2/>
    ,root);

这样就会报一个warning一个错误,望指点!

#2

好吧!解决了,自问自答了, 原因还是自己不太了解export 和 module.exports 的区别!

#3

我想问问你这里所说的按需加载router是什么意思?
我的理解是webpack根据不同的路由打包了不同的js文件,然后通过服务端配置访问该路由的时候就返回该路由的js,如果不是这样的意思,那么你的路由按需加载又是啥意思。有什么优势?

1 Like
#4

其实就是你那个意思!

#5

页面之间不是有公用组件和逻辑吗?怎样根据路由来打包js呢?

#6

如果你不打包的话,汇集成一个js文件的话,这个文件会很大的,这样首次加载会很费时间,根据路由将不同的模块打包的话就会分别打包成不同的js,需要哪个就加载哪个呗,提升首屏渲染性能

#7

可以教教我怎样分路由打包吗,贴个代码给我喵喵:flushed:

#8

我想了一下,你如果每次请求不同的路由都要去后端返回js文件,这样每次都要刷新当前的页面,那么就失去了单页应用的意义,这样做的效率还不如用php和java返回页面的性能高。
而在单页应用中,只需要第一次加载js,然后在网站运行过程中,每次跟后端交互只需要通过ajax去请求数据,提交数据,不需要再返回js文件。

#9

我明白你的意思,这个单页应用有好有坏!好的是用户体验很棒,和原生app体验差不多,缺点是如果你的应用足够庞大的话,你都打包到一个js文件中,这样你首次加载会很费时间(虽然说加载完之后一切操作就不用再加载了),时间越长,被用户抛弃的几率就越大,如果你一个网页打开了20秒,你愿意等待么? 各有利弊,看你如何取舍!

#10

想多了,20s,除非你用2G网络,js最多也就几M,通过前端压缩和服务端压缩加速之后,对首屏加载并没有那么慢,再说,如果你的压缩不到位,导致wifi状态下加载需要5s以上,那么可以在index.html加一个gif动画啊,搞一个像app打开的时候的动画效果。

#11

我只是举个例子,可能也不太恰当,哈哈,表达的意思就是首屏加载越快越好,这个你应该明白吧!
返回来讲,你的那种表示是基于你做单页应用而提出来的观点对吧,React、Vue、Angular等是可以用来的做单页应用,但是也不只是用来做单页应用, 难道你觉得使用这些框架做出来的都是单页应用吗?
其实更多的是使用框架当做一个高级模板引擎来使用,从而提升开发速度,并不是所有的项目都适合做成单页应用,这个我想你也是赞同的。 单页应用的优缺点 你可以看一下这个 http://www.manster.me/?p=475
如果不做成单页应用的话,你的路由应该如何跳转?如何做到根据不同的路由做到按需加载?如何做到根据模块按需加载? 这就回到了我们在讨论的这个问题上了,,,,不知道我这么啰嗦你是否听明白 了:smiley:

#12

那么你认为用react来开发能提高开发效率?光是学习成本就高了,然后还得专门招懂这些技术的人才能马上做项目。然后还得踩一堆坑,有 的坑目前都无法解决。
那么你发现没有,你现在考虑的按需加载,模块加载的问题,php和java早就已经解决了,为什么不用这些成熟的技术去实现呢?

#13

为什么其他语言的程序员很多都会鄙视前端,不就是因为我们这些前端自以为搞了很多创新的技术,最后还是向着java靠拢,光是ES6、模块化、TS,这些抄袭了多少java的思想。
说好听点就是前端继承了java这类开发语言的精髓,说不好听就是抄袭。

#14

学习成本提高是没错,那你觉得你用原生js和React来写的话,哪个更快?更好维护,如果你使用原生Js来写的话,没有一个好的架构和设计模式,代码量大的话,维护起来是很费劲的,所以说应该是用模块化开发的模式,你用原生js来进行模块开发试一试,方便么?不方便! 按需加载的问题
你的这么说的对吧! 如果你的按需加载(其实你说的这个并不能称作按需加载)交由php,Java来做的话,你的前后端分离何在? react按需加载和前端开发可以交给一个人来做,现在你要前端后端混合起来,这样很影响开发效率! 分离开来后端只提供接口不是更好么? 至于SEO的问题,可以使用同构来解决等等。

至于说其他程序员很笔试前端,拿Java来说,吹牛逼你让他来写个前端试试!php人员都认为php是世界上最好的语言,其他程序员都鄙视php,why? 否是在撕逼而已,拿一个不能说明太大问题的工资来说,初级前端、初级Java、初级php,你觉得谁的工资高呢?(虽然也说明不了太大问题)
好!说一下是什么是前端人员,前端人员技能树

ok,现在说说你所谓的抄袭部分 ,JavaScript是弱类型的语言,Java是强类型的语言,js 因为是弱类型,所以在一下开发过程中你写的不规范,他也能运行,Java不同,你就是少写个分号,他都不行。 所以说为了web更加安全,js在迭代过程中势必会改变模式,以增强其安全性,比如ES6 中增加了类 import 等 是和Java很像,我学习es6的时候也是觉得。但是这能叫抄袭么?不过怎么说的人都有,人云亦云嘛,无需管他们。 (前端继承了java这类开发语言的精髓,说不好听就是抄袭), 话说C是语言之母 ,那又如何解释 C和Java的关系呢?抄袭?更改?还是什么呢?

#15

不知道这个所谓的“前端人员技能树”的意义何在,前后端分离的概念,不是说前端只做前端的事情,后端只做后端的事情,而是数据与表现层的分离。
前端工程师是个伪需求,任何一个水平达到了新的高度的前端人员,都会掌握多种后端语言,光靠这棵树就能总结“前端工程师”这个概念吗?
如果你硬要分清楚前端和后端,甚至是全栈这些岗位的区别,那么可以说,对于初级前端来说,这些是有区别的,也是符合你现在的逻辑(因为初级前端只会干前端的事情),但对于中高级前端来说,他们已经不是纯前端,而是精通全栈编程的程序员了。

#16

敢问现在敢号称“精通”全栈编程工程师的人有几个?(我司招人就是专治各种“精通”,保证五个问题让你从精通变为熟练或者什么)不是说会写个node server,会个js就能称之为全栈。(虽然说阿里现在web招人就标明全栈)全栈的概念可大可小,刚从培训班出来的人,会个express就敢说全栈!其实都是在扯犊子!
前端工程师 你说是个伪需求,我不这么认为。后端程序员Java也好php也罢,你让他去搞懂css3 去,照样搞不定。你前端工程师再牛逼让你去搞Java、php去做负载均衡、分流、等一些后台技术,你也懵逼。
我随便找个那个技能树并不能涵盖前端需要掌握的知识,但是不排除前端技能树和后端技能树重合的地方,并且越高的水平,重叠越多,这是技能增值涵盖领域的问题。前端工程师还是需要还是很大的! 只是有些公司招写页面的、招写js的、招写框架的、招H5的等他都会写招前端工程师。这样会让人产生“前端工程师职位”没有明确技术的疑问。

#17

后端的确大都鄙视前端:joy:

#18

那是因为后台的意识可能还停留在前端只是html、css、js的领域,或者感觉前端新技术迭代很快,技术不稳重。总之就是各种鄙视呗。这个行业就是互相鄙视,但又互相敬重!
还有一方面就是看公司的重点在哪里,要是逻辑 后:前==3:1的公司,那前端指定被鄙视!

#19

方便把官网地址贴出来么

#20

今天设置按需加载,直接就看到大神提示export 和 module.exports要分别出来,但是我想问下,webpack需要怎么配置呢,我route是写好了