Turborepo中未使用依赖未被Tree Shaking问题求助

我正在学习使用Turborepo，可能存在操作不当的情况。我的Turborepo配置仓库为turborepo-treeshaking-repro。

我的ui包包含两个组件：

• Button - 依赖styled-components和framer-motion
• Loader - 无任何外部依赖

Button.tsx 代码 #

import * as React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";

export const Button = () => {
  return (
    <ButtonContainer
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
    >
      Boop
    </ButtonContainer>
  );
};

const ButtonContainer = styled(motion.button)``;

Loader.tsx 代码 #

import * as React from "react";

export const Loader = () => {
  return <div>MyLoader</div>;
};

ui库的package.json #

{
 "devDependencies": {
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/styled-components": "^5.1.25",
    "eslint": "^7.32.0",
    "eslint-config-custom": "workspace:*",
    "react": "^17.0.2",
    "styled-components": ">=5.3.3",
    "tsconfig": "workspace:*",
    "typescript": "^4.5.2"
  },
  "dependencies": {
    "framer-motion": "^2.9.4"
  }
}

我的docs应用仅导入无依赖的Loader组件，web应用仅导入依赖两个库的Button组件。

疑问 #

是否可以预期docs应用的打包产物不包含styled-components和framer-motion这两个第三方库？是否需要调整依赖定义方式？（假设framer-motion仅在ui库内使用，不想设为peer dependency）

构建情况 #

构建后两个应用的包大小完全一致，似乎都包含了这两个第三方库。构建输出如下：

docs:build: Page                                       Size     First Load JS
docs:build: ┌ ○ /                                      44.3 kB         115 kB
docs:build: └ ○ /404                                   192 B          71.3 kB
docs:build: + First Load JS shared by all              71.2 kB
docs:build:   ├ chunks/framework-18dbf282fc9f86dd.js   42 kB
docs:build:   ├ chunks/main-7adb95b49d154e8e.js        26.9 kB
docs:build:   ├ chunks/pages/_app-5e74c22d5551a606.js  1.37 kB
docs:build:   └ chunks/webpack-49b6f2937c9ce9f4.js     838 B
docs:build:
docs:build: ○  (Static)  automatically rendered as static HTML (uses no initial props)
docs:build:
web:build: Page                                       Size     First Load JS
web:build: ┌ ○ /                                      44.3 kB         115 kB
web:build: └ ○ /404                                   192 B          71.3 kB
web:build: + First Load JS shared by all              71.2 kB
web:build:   ├ chunks/framework-18dbf282fc9f86dd.js   42 kB
web:build:   ├ chunks/main-7adb95b49d154e8e.js        26.9 kB
web:build:   ├ chunks/pages/_app-5e74c22d5551a606.js  1.37 kB
web:build:   └ chunks/webpack-49b6f2937c9ce9f4.js     838 B

补充说明：组件层面的Tree Shaking是正常的（Loader不在web包中，Button不在docs包中），但第三方库未被Tree Shaking。

感谢帮助！

内容的提问来源于stack exchange，提问作者Uri Klar