編輯的文件與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可以節省通過只導入你的東西需要！