react.js的编译文件太大了

Question

我用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'
    }
};

Answer 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 您只需导入所需内容即可保存！