How to Minimize ES6 import Module? Only what is needed

  node.js, question

When react was packaged with webpack, it was found that the production environment was still huge.
After analyzing the json file generated by packaging, it was found that there was one line of code in the react component (third party, node_modules)

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

In the corresponding packing record inside

 "name": "./~/lodash/lodash.js",
 "index": 744,
 "index2": 734,
 "size": 479582, // 468 KiB in analysis
 "cacheable": true,
 "built": true,
 "optional": false,
 "prefetched": false,

I also tried to add the plugin of babel-plugin-lodash to the. babelrc. I found that the whole package was still included.

At present, the following points are clear:

  1. There is no overall reference to lodash in your own code, similar to import _ from ‘lodash’ code;

  2. I remember that the webpack will only refer to the required part by default under the premise of import {map, bind key, merge} from’ lodash’ (the specific information cannot be found at once);

  3. If there is no problem above, is it because the import ‘lodash’ occurred in the node_modules inside, causing no parsing?

The younger brother has just come into contact with webpack, and also asks elder prawn to dispel doubts.