reactjs - 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属性，该属性将指向lib的esm版本。

由于没有它，您将需要直接导入。

前:

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

class Component extends React.Component {

  render() {
    return <SketchPicker />
  }
}

后:

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

class Component extends React.Component {

  render() {
    return <SketchPicker />
  }
}