SPFx项目Webpack摇树优化：标记依赖模块为sideEffects的方法

核心问题分析 #

之前的sideEffects配置无效，主要是路径格式不正确，Webpack无法正确识别node_modules中的目标模块，同时存在包名拼写错误（代码中引入的是adaptive-html，而非AdaptiveHtml）。

正确配置方式 #

方式1：在SPFx项目的package.json中配置 #

使用相对项目根目录的完整路径或包名通配符，让Webpack精准定位需要保留的模块：

{
  "name": "My SPFx Webpart",
  "sideEffects": [
    // 标记Common-Library的Utils文件（若为编译后的JS文件，替换为Utils.js）
    "node_modules/Common-Library/Utils.ts",
    // 标记adaptive-html整个包的所有文件，避免被摇树移除
    "node_modules/adaptive-html/**/*"
  ]
}

方式2：在Common-Library自身的package.json中配置（更推荐） #

直接在node_modules/Common-Library/package.json内添加sideEffects配置，Webpack会优先读取模块自身的配置，定位更精准：

{
  "sideEffects": [
    "./Utils.ts",
    "node_modules/adaptive-html/**/*"
  ]
}

注意事项 #

• 包名必须与代码中引入的一致：代码里用import AdaptiveHtml from "adaptive-html"，所以包名是小写的adaptive-html，不要写成大写开头的AdaptiveHtml。
• 根据实际编译产物调整文件后缀：如果Common-Library已编译为JS文件，路径需改为Utils.js。
• 确保Webpack版本在4及以上，sideEffects特性从Webpack 4开始支持。

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