ES6 import 模块如何实现最小化?只引需要的

Question

使用webpack对react打包, 发现生产环境体积仍然巨大.
在分析打包生成的json文件发现, 有一个react的组件(第三方的, 在node_modules)中, 有一行代码

import { map, bindKey, merge } from 'lodash';

在对应的打包记录里

{
    ...
  "name": "./~/lodash/lodash.js",
  "index": 744,
  "index2": 734,
  "size": 479582, //分析中468 KiB
  "cacheable": true,
  "built": true,
  "optional": false,
  "prefetched": false,
  ...
}

也试过在.babelrc中加babel-plugin-lodash的plugin. 发现还是整个被打包进来了.

目前明确几点:

1. 在自己的代码中不存在lodash的整体引用, 类似import _ from 'lodash'的代码;

2. 我记得webpack在import { map, bindKey, merge } from 'lodash'前提下默认会只引用需要部分(具体资料一下子找不到了);

3. 如果上面都没问题, 是否是因为这个import 'lodash' 发生在node_modules里的缘故, 导致没有进行解析?

小弟刚接触webpack, 还请大虾前辈解惑.

Answer 1

rollup

Answer 2

用 webpack@2 ，官方Demo：https://github.com/webpack/webpack/tree/master/examples/harmony-unused

参见：http://www.2ality.com/2015/12/webpack-tree-shaking.html

Answer 3

import { map, bindKey, merge } from 'lodash';
// vs.
import map from 'lodash/map';  
import bindKey from 'lodash/bindKey';  
import merge  from 'lodash/merge ';  

2个有区别的