使用路由器和浏览器时,React.js包的大小太大

这是我的Routes.jsx文件

var React = require('react'); var Router = require('react-router/lib/router') var useRouterHistory = require('react-router/lib/useRouterHistory'); var hashHistory = require('history/lib/createHashHistory'); var IndexRoute = require('react-router/lib/IndexRoute'); var Route = require('react-router/lib/Route'); var History = useRouterHistory(hashHistory)({ queryKey: false }); var Base = require('./components/Pages/Base.jsx'); var HomePage = require('./components/Pages/HomePage.jsx'); var Historial = require('./components/Pages/Historial.jsx'); var NuevoPedido = require('./components/Pages/NuevoPedido.jsx'); var Routes = ( <Router history={History}> <Route path="/" component={Base}> <IndexRoute component={HomePage} /> <Route path="/historial" component={Historial} /> <Route path="/pedido/nuevo" component={NuevoPedido} /> </Route> </Router> ); module.exports = Routes; 

我的编译脚本看起来像这样

 watchify src/main.jsx -v -t [ babelify --presets [ react es2015 ] ] -o public/js/main.js 

这会输出一个1532 KB的文件

我的制作脚本看起来像这样

 SET NODE_ENV=production & browserify src/main.jsx -v -t [ babelify --presets [ react es2015 ] ] -g [uglifyify] -o public/js/bundle.js 

这输出一个730 KB的文件

我有以下依赖项

  "dependencies": { "desandro-classie": "^1.0.1", "node-uuid": "^1.4.7", "react": "^0.14.7", "react-dom": "^0.14.7", "react-router": "^2.0.0", "reflux": "^0.3.0", "validator": "^5.0.0", "whatwg-fetch": "^0.11.0" }, 

甚至uglified和压缩的文件大小为730 kb这是我写的小代码巨大。

我注意到如果拿出EG:

 var NuevoPedido = require('./components/Pages/NuevoPedido.jsx'); Which is a "page wrapper" 

这是相应的路线

 <Route path="/pedido/nuevo" component={NuevoPedido} /> 

删除任何路线,它的组件从1.5 MB文件下降像500 kb,但这是疯狂的,因为这些组件不是任何接近500kb,所以我怀疑,必须有某种依赖关系的重复,我试过npm的重复数据删除没有运气。

你可以检查我的github代表https://github.com/Mercality/dilugaReact来validation这一点。