使用react.js编译的文件太大

Question

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

我的咕噜文件

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 ！