NextJS 中的 Tree Shaking 包括所有 node_modules 包，即使没有使用它

Posted 2023-02-22

【中文标题】NextJS 中的 Tree Shaking 包括所有 node_modules 包，即使没有使用它

【英文标题】：Tree shaking in NextJS includes all of node_modules package even if not using it all

【发布时间】：2020-06-27 05:09:51

【问题描述】：

下面是来自 Next JS 的我的包大小的屏幕截图。我要指出的是node_modules下的react-color组件。我以这种方式导入它们：

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

但是你看它包括我没有使用的所有东西，比如photoshop.js、sketch.js等。

如何避免将我不使用的东西与摇树捆绑在一起？

我确实注意到 import debounce from 'lodash'; 导入了所有 lodash 但 import debounce from 'lodash/debounce'; 将包大小减少了 200kB。

【问题讨论】：

我试过了，Cannot find module 'react-color/GithubPickerProps'. 这不是一回事。另外，我认为它应该能够从给定的数据中摇摇晃晃。

【参考方案1】：

为了使 tree-shaking 正常工作，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 />
  

【讨论】：

这只是一种解决方法，不能在任何地方应用。例如，报告中的 lodash 仍然包含所有未使用的代码。我需要知道需要做什么才能使每个库的摇树工作，包括依赖项的依赖项。

我告诉过你需要做什么，联系lib作者，索取esm文件。

对于 lodash 阅读此azavea.com/blog/2019/03/07/lessons-on-tree-shaking-lodash

另外，正如我所提到的，我确实注意到 import debounce from 'lodash';导入所有的 lodash，但从 'lodash/debounce' 导入 debounce；将封装大小减小了 200kB。不过我停止使用 react-color ..

我想为该库打开问题，以便维护者知道它。