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

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

使用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, 还请大虾前辈解惑.


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

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


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

2个有区别的


rollup

【热门文章】
【热门文章】