NextJS中的树形摇动包含了所有的node_modules包，即使没有全部使用它。

Question

下图是我从Next JS中截图的包大小。我想指出的是 react-color 下部件 node_modules. 我是这样导入的。

import { GithubPickerProps, GithubPicker, AlphaPicker } from 'react-color';

但你看它包括了所有我不用的东西，比如： photoshop.js, sketch.js，等等。

如何让它不把我不用的东西和摇树捆绑在一起？

我确实注意到 import { debounce } from 'lodash'; 全盘引进 lodash 不过 import debounce from 'lodash/debounce'; 减少了200kB的包大小。

Answer 1

为了让树形摇动能正常工作。react-color 应加 module 的属性，以 package.json 它将指向esm版本的lib。

因为它没有，你需要直接导入。

前期：在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现，在这里，你会发现。

import React from 'react'
import SketchPicker  from 'react-color'

class Component extends React.Component {

  render() {
    return <SketchPicker />
  }
}

After:

import React from 'react'
import SketchPicker  from 'react-color/lib/Sketch'

class Component extends React.Component {

  render() {
    return <SketchPicker />
  }
}