簡潔的react路由，代替react-router，只要2K！

介紹一個很小的react路由：
路由地址：https://github.com/lanjingling0510/react-rainie-router

最近在做公司的CQASO移動端項目，用的react+redux。愛掏網 - it200.comspa單頁用react-router路由實現導航。愛掏網 - it200.com
路由如下：
html 代碼

     {
                if (!CQCommon.getUrlParam('code')) {
                    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc5e9cdd2f3c79b07&redirect_uri=${window.encodeURIComponent('http://m.cqaso.com/bind')}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
                    cb(new Error('not code'));
                    return;
                }
                require.ensure([], (require) => {
                    const Bind = require('./pages/bind.jsx');
                    cb(null, Bind.default);
                }, 'bind');
            }} />
         {
                if (!CQCommon.getUrlParam('code')) {
                    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc5e9cdd2f3c79b07&redirect_uri=${window.encodeURIComponent('http://m.cqaso.com/unbind')}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
                    cb(new Error('not code'));
                    return;
                }
                require.ensure([], (require) => {
                    const UnBind = require('./pages/unbind.jsx');
                    cb(null, UnBind.default);
                }, 'unbind');
            }} />
         {
                    require.ensure([], (require) => {
                        const Home = require('./pages/home.jsx');
                        cb(null, Home.default);
                    }, 'home');
                }} />
             {
                    require.ensure([], (require) => {
                        const Share = require('./pages/shareKeywords.jsx');
                        cb(null, Share.default);
                    }, 'login');
                }} />
             {
                    require.ensure([], (require) => {
                        const Login = require('./pages/login.jsx');
                        cb(null, Login.default);
                    }, 'login');
                }} />
             {
                    require.ensure([], (require) => {
                        const Register = require('./pages/register.jsx');
                        cb(null, Register.default);
                    }, 'register');
                }}
                onEnter={(nextState, replaceState) => {
                    // 如果登錄，跳轉到首頁
                    if (Profile.get()) {
                        replaceState('/');
                    }
                }} />
             {
                    require.ensure([], (require) => {
                        const AppList = require('./pages/appList.jsx');
                        cb(null, AppList.default);
                    }, 'appList');
                }} />
             {
                    require.ensure([], (require) => {
                        const TopList = require('./pages/topList.jsx');
                        cb(null, TopList.default);
                    }, 'topList');
                }} />
             {
                    require.ensure([], (require) => {
                        const keywordsRank = require('./pages/keywordsRank.jsx');
                        cb(null, keywordsRank.default);
                    }, 'keywordsRank');
                }} />
             {
                    require.ensure([], (require) => {
                        const keywordsAttent = require('./pages/keywordsAttent.jsx');
                        cb(null, keywordsAttent.default);
                    }, 'keywordsAttent');
                }} />
             {
                    require.ensure([], (require) => {
                        const keywordsCompare = require('./pages/keywordsCompare.jsx');
                        cb(null, keywordsCompare.default);
                    }, 'keywordsCompare');
                }} />
             {
                    require.ensure([], (require) => {
                        const keywordsHot = require('./pages/keywordsHot.jsx');
                        cb(null, keywordsHot.default);
                    }, 'keywordsHot');
                }} />
             {
                    require.ensure([], (require) => {
                        const keywordsHotDetail = require('./pages/keywordsHotDetail.jsx');
                        cb(null, keywordsHotDetail.default);
                    }, 'keywordsHotDetail');
                }} />
             {
                    require.ensure([], (require) => {
                        const CollectedKeywords = require('./pages/collectedKeywords.jsx');
                        cb(null, CollectedKeywords.default);
                    }, 'collectedKeywords');
                }} />
             {
                    require.ensure([], (require) => {
                        const Priority = require('./pages/priority.jsx');
                        cb(null, Priority.default);
                    }, 'priority');
                }} />
             {
                    require.ensure([], (require) => {
                        const Excavation = require('./pages/excavation.jsx');
                        cb(null, Excavation.default);
                    }, 'excavation');
                }} />
             {
                    require.ensure([], (require) => {
                        const Contact = require('./pages/contact.jsx');
                        cb(null, Contact.default);
                    }, 'contact');
                }} />
             {
                    require.ensure([], (require) => {
                        const AppLayOut = require('./layout/AppLayOut.jsx');
                        cb(null, AppLayOut);
                    }, 'applayout');
                }}>
                 {
                        require.ensure([], (require) => {
                            const Information = require('./pages/information.jsx');
                            cb(null, Information);
                        }, 'infomation');
                    }} />
                 {
                        require.ensure([], (require) => {
                            const Version = require('./pages/version.jsx');
                            cb(null, Version);
                        }, 'version');
                    }} />
                 {
                        require.ensure([], (require) => {
                            const Rank = require('./pages/rank.jsx');
                            cb(null, Rank);
                        }, 'rank');
                    }} />
                 {
                        require.ensure([], (require) => {
                            const Keywords = require('./pages/keywords.jsx');
                            cb(null, Keywords);
                        }, 'keywords');
                    }} />
                 {
                        require.ensure([], (require) => {
                            const Optimization = require('./pages/optimization.jsx');
                            cb(null, Optimization);
                        }, 'optimization');
                    }} />
                 {
                        require.ensure([], (require) => {
                            const Compare = require('./pages/compare.jsx');
                            cb(null, Compare);
                        }, 'compare');
                    }} />
                 {
                        require.ensure([], (require) => {
                            const Comments = require('./pages/comments.jsx');
                            cb(null, Comments);
                        }, 'comments');
                    }} />
                 {
                        require.ensure([], (require) => {
                            const Attends = require('./pages/attents.jsx');
                            cb(null, Attends);
                        }, 'attents');
                    }} />
            

每個頁面單獨請求(coding-split)后，公共模塊的js大小為120k(gzip壓縮后)，加上分離出來的單個頁面的大小，導致首屏的渲染響應速度極低。愛掏網 - it200.com
如圖為app列表頁面的js文件大小:

為了提高首屏的響應速度，減小bundle的大小，我放棄了100多k的react-router，自己寫了一套功能，api一樣的路由。愛掏網 - it200.com
包含了Link，Router，Route，router,router組件動態獲取component, 通過listenBofore函數可添加路由過渡動畫的邏輯等。愛掏網 - it200.com
路由如下：
html 代碼

     Router>
        

廢棄react-router后，看到bundle.js減少13k，13k雖少，但對于移動端來說是多么重要。愛掏網 - it200.com

路由地址：https://github.com/lanjingling0510/react-rainie-router