react.js 编译的文件太大

【问题标题】：Compiled file with react.js too largereact.js 编译的文件太大
【发布时间】：2016-01-29 19:57:31
【问题描述】：

我用 react.js 和 jsx 创建了一个模块。我将 lodash 作为唯一的外部库。我用 Grunt 和 Browserify 编译的文件是 1.1mb，缩小了近 500kb。这怎么可能？如何减小文件大小？

我的 gruntfile

module.exports = {
    dist: {
        options: {
            debug: true,
            transform: [require('grunt-react').browserify]
        },
        src: [ 'src/js/app.js' ],
        dest: 'dist/app.js'
    }
};

【问题讨论】：

stackoverflow.com/questions/34239559
使用更少的代码。框架通常会在业务逻辑到达引擎之前对您的应用程序进行沙包...
我的源代码小于 20kb。而且我只使用 lodash 作为外部库。所以这不是问题
您可能没有正确地预想您的构建。对于 dev 构建，1MB 对我来说听起来并不太疯狂。一旦你设想了你的构建并使用了诸如 UglifyJS 的死代码消除之类的东西，你应该会缩小到 500kb 以下。例如，请参阅here。

标签： javascript reactjs gruntjs browserify

【解决方案1】：

您导入lodash 的方式会产生巨大的影响。出于好奇，我尝试了以下方法（同时保持其余代码不变）：

1) 导入全部的lodash

import _ from 'lodash';

并将其用作

const attending = _.find(attendees, (o) => o.id === parseInt(userId, 10));

捆绑大小：

2) 只导入我需要的功能

import find from 'lodash/collection/find';

并相应地使用它

const attending = find(attendees, (o) => o.id === parseInt(userId, 10));

捆绑大小：

这是 0.42 MB，您可以通过只导入您需要的内容来节省！

【讨论】：