在业务项目 Business 中引用了组件库 Components，使用 webpack 构建，配置了 Tree Shaking 相关属性，未被使用的代码都被删除了，但未被使用的图片却出现在了最终产物中。
比如，Components 导出了组件 ComponentA，存在这样的资源引用关系：ComponentA.tsx -> ComponentA.less -> ComponentA.png。ComponentA 未被使用，所以 ComponentA.tsx、ComponentA.less、ComponentA.png 应该都被删除，但在最终产物中，确实没有 ComponentA.tsx、ComponentA.less 相关代码，但 ComponentA.png 还在。
如何才能把 ComponentA.png 也删除？
我创建了一个项目，跟前面的描述有所差异，组件都在本项目内，不是在组件库中，执行 build 命令，会发现 component-a 未被使用，在构建产物中，它的所有代码都被删除，但只被它使用的图片却还在。
AI BotBETA
极客观点
项目管理
HarmonyOS
### 解决 webpack 中 Tree Shaking 未删除未使用图片的问题
在使用 webpack 构建时，Tree Shaking 通常针对 JavaScript/TypeScript 代码有效，但对于静态资源如图片，Tree Shaking 并不直接适用。webpack 处理静态资源（如图片）通常依赖于 `file-loader` 或 `url-loader` 等 loader，它们不会自动检测哪些资源是未使用的。
为了解决这个问题，你可以考虑以下几种方法：
1. **使用 `purgecss-webpack-plugin` 清理未使用的 CSS**：
- 首先，确保你的 CSS 是通过 JavaScript 动态引入的，这样 `purgecss` 才能分析到哪些 CSS 是未使用的。
- 安装 `purgecss-webpack-plugin` 和相关的 `purgecss` 包。
- 配置 `purgecss-webpack-plugin` 来扫描你的代码，并移除未使用的 CSS。由于 CSS 被移除了，通过 CSS 引入的图片（如背景图片）也将被删除。
2. **手动管理图片资源**：
- 确保图片资源是通过 JavaScript 代码动态引入的，而不是通过 CSS 或 HTML 静态引用。
- 使用 webpack 的动态 `import()` 语法来引入组件，这样未使用的组件及其资源（包括图片）就不会被打包到最终产物中。
3. **使用 `image-webpack-loader` 优化图片**：
- 虽然 `image-webpack-loader` 本身不会删除未使用的图片，但它可以在打包过程中优化图片。结合其他方法（如动态引入），可以间接减少最终产物中的图片大小。
4. **自定义 webpack loader 或插件**：
- 编写一个自定义的 webpack loader 或插件，分析你的代码和资源引用关系，然后删除未使用的图片。
- 这通常是一个复杂的任务，需要对 webpack 的工作原理有深入的理解。
5. **考虑使用现代框架或工具**：
- 一些现代前端框架（如 Next.js、Nuxt.js）或构建工具（如 Vite）内置了更好的静态资源管理和优化功能，可能更适合你的需求。
综上所述，直接通过 webpack 的 Tree Shaking 功能来删除未使用的图片是不现实的。你需要结合其他方法（如 CSS 清理、资源动态引入等）来实现这一目标。8 回答6k 阅读✓ 已解决
9 回答9.4k 阅读
6 回答5k 阅读✓ 已解决
3 回答10.5k 阅读✓ 已解决
4 回答7.3k 阅读
5 回答7.3k 阅读✓ 已解决
5 回答8.2k 阅读