这是我的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进行验证。