Question

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

使用路由器和browserify时，React.js捆绑包大小太大

0 个答案: