tree shaking 状态管理库需写法、配置与库选型协同：用 esm 版本（如 pinia/zustand/rtk）、避免动态访问和全量导入、显式声明 sideeffects，并配合构建工具深度优化。
状态管理库的 Tree Shaking 不能靠“自动摇”，得靠写法 + 配置 + 库选型三者配合。很多开发者以为只要用了 ES Module 就能摇掉没用的状态逻辑，结果发现整个 store、actions、甚至整个 Vuex/Pinia 实例都打进了 bundle——根本没摇动。核心问题在于：状态管理代码往往带副作用、依赖动态访问、或被框架隐式引用。
确保使用支持 ESM 的现代状态库版本
老式库（如早期 Vuex 3.x、Redux UMD 包）默认输出 CommonJS 或 IIFE，Tree Shaking 失效。必须切换为明确提供 ESM 构建产物的版本：
- Pinia：直接使用
import { defineStore } from 'pinia'—— 官方只发布 ESM 格式，天然支持摇树 - Zustand：推荐
import { create } from 'zustand'，其包入口是 ESM，且导出函数都是独立命名导出 - Redux Toolkit：用
import { configureStore, createSlice } from '@reduxjs/toolkit'，但注意configureStore有副作用（创建 store 实例），无法被摇掉；而createSlice可以按需导入，单个 slice 不会被整包拖入 - 避免
import * as redux from 'redux'或import redux from 'redux'—— 这会引入全部 API，包括你永远不用的combineReducers、applyMiddleware等
避免动态访问和副作用陷阱
Tree Shaking 要求导出项可被静态识别，一旦出现运行时决定的行为，就可能保全整个模块：
- ❌ 错误写法：
const actions = store.actions; actions[TYPE]()—— 属性名动态计算，打包工具无法判断哪个 action 被调用 - ❌ 错误写法：
import store from './store'; store.dispatch(...)—— 整个 store 对象被引用，所有内部方法、订阅逻辑、中间件都会保留 - ✅ 正确写法：
import { useCounterStore } from './stores/counter'; const counter = useCounterStore(); counter.increment()—— Pinia 的 store 是函数调用，且每个 hook 只关联自身逻辑，Terser 可安全剔除未使用的 store - ✅ 正确写法：
import { useSelector, useDispatch } from 'react-redux'—— React-Redux v8+ 的 hooks 是命名导出，未使用的 hook 不会触发整个 react-redux 打包
显式声明 sideEffects，防止误删
状态管理库常含副作用代码（如初始化监听、全局事件注册、devtools 连接）。若你在项目中直接 import './store/index.ts'，而该文件没有导出任何值，Webpack 会因 sideEffects: false 设置将其整个删掉——导致 store 根本不执行。
- 在项目根目录
package.json中，明确列出有副作用的入口文件："sideEffects": ["./src/store/index.ts", "./src/store/plugins/logger.ts", "*.css"] - 对纯逻辑文件（如
./src/stores/user.ts），确保它只做定义（defineStore/create），不执行初始化，这样即使未被引用，也不会被误删；真正触发初始化的入口文件才进sideEffects - 第三方库若已标注
"sideEffects": false（如 zustand、jotai），可放心使用；若未标注，建议查其源码或文档确认是否安全
配合构建工具深度启用分析能力
Webpack 和 Vite 默认开启基础 Tree Shaking，但状态管理场景需要更细粒度控制：
- Webpack：确保
optimization.usedExports: true（标记导出使用状态）、optimization.innerGraph: true（分析模块内调用链），尤其对嵌套的 action creator 或 selector 函数有效 - Vite：默认使用 esbuild（不支持细粒度摇树）+ rollup（生产构建时启用），因此务必在
vite.config.ts中保留build.rollupOptions.treeshake: true（默认已开） - 用
rollup-plugin-visualizer或webpack-bundle-analyzer查看 store 相关 chunk，确认是否只包含实际用到的 store、action、selector，而非整个src/store文件夹
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
