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

为了使 tree-shaking 正常工作，react-color应该module向package.json将指向 esm 版本的 lib添加属性。

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

前：

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 />
  }
}