"sideEffects": false 是 Tree Shaking 关键前提，但需配合纯模块写法、正确构建配置（Webpack/Vite/Rollup 启用相关选项）、按需导入及第三方库适配，才能彻底剔除未用代码。
直接在 package.json 里写 "sideEffects": false 是关键一步，但光靠它不够——必须配合模块写法、构建配置和导入方式，才能真正让未使用的代码被整块剔除。
确保所有 JS 模块真正“无副作用”
副作用指模块顶层执行时产生的外部影响，比如：
– 修改全局对象（Array.prototype.map = ...）
– 发起请求或监听事件（fetch('/init') 在顶层调用）
– 注入样式（import './index.css'）
– 执行初始化逻辑（initI18n() 直接调用）
只要存在这类行为，整个文件就会被保留，哪怕你只用了其中一个小函数。
建议：
– 把副作用逻辑抽离到单独文件（如 polyfill.js 或 global.css）
– 其余工具类、工具函数保持纯导出，不执行任何操作
– 导出全部使用具名形式：export const format = () => {}，避免 export default + 聚合导出混合使用
正确配置 package.json 的 sideEffects 字段
"sideEffects": false 表示：项目中所有 JS 文件默认无副作用，可安全删除未引用部分。
但如果有例外，必须显式列出，否则副作用文件可能被误删：
- 全局样式：加
"*.css"或"src/styles/index.scss" - 垫片脚本：加
"src/polyfill.js" - 字体/图标资源：加
"*.woff"等资源路径（如果 loader 会触发副作用）
注意：
– 数组里的路径支持 glob，如 "*.css" 等价于 "**/*.css"
– 不要写 "sideEffects": []，空数组会被视为“全部有副作用”
构建工具需启用对应能力
Webpack 和 Vite 默认在 production 模式下开启 Tree Shaking，但仍需确认关键配置：
- Webpack：确保
mode: 'production'，无需额外设usedExports（5+ 版本已内置） - Vite：默认启用，若用自定义 Rollup 配置，检查
treeshake.moduleSideEffects是否为false - Rollup：确认
treeshake: { moduleSideEffects: false }已启用
第三方库若自身 package.json 声明了 "sideEffects": false，说明它已适配——你按需导入时，它的未用模块也会被摇掉。
导入方式决定能否真正“按需”
即使库本身支持 Tree Shaking，错误的引入方式仍会让整包保留：
- ❌ 错误：
import _ from 'lodash'→ 全量引入，摇不动 - ✅ 正确：
import { debounce } from 'lodash-es'（推荐 lodash-es） - ✅ 正确：
import { createApp } from 'vue'（Vue 3 ESM 版本） - ⚠️ 警惕：
export * from './utils'可能阻断分析，尤其当./utils本身有副作用时
自己写的库对外发布时，记得在 package.json 中设置："module": "dist/index.esm.js"，并确保该文件是 ES Module 格式输出。
