配合的核心在于使用 es module 语法并配置构建工具（如 webpack）的 mode 为 production，这样工具会自动移除未使用的代码并分割文件。具体做法是确保源码中只使用 import/export，并在 webpack.config.js 中开启 optimization.splitchunks 和 optimization.minimize。
Webpack 如何识别并移除未使用的导出
Webpack 在 production 模式下会分析模块间的依赖关系，通过静态分析标记未被引用的导出函数或变量，并在压缩阶段将其剔除。这依赖于 ES Modules 的静态结构特性，即 import 和 export 必须在顶层声明。
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js'
},
mode: 'production',
optimization: {
usedExports: true,
sideEffects: false,
splitChunks: {
chunks: 'all'
}
}
};上述配置开启了 usedExports 以标记死代码，sideEffects 设为 false 假设包无副作用从而更激进地删除，splitChunks 则负责将大 bundle 拆分为多个 chunk。运行 npx webpack 后，未使用的代码将被移除，且入口文件会被分割。
立即学习“Java免费学习笔记（深入）”；
如何通过 SplitChunks 配置实现按需加载
SplitChunks 插件可以将公共代码提取到单独的文件中，或者根据路由/动态导入将代码分割成独立的 chunk。通过配置 cacheGroups，可以指定哪些模块应该被分离出来，从而实现按需加载（Lazy Loading），减少首屏加载时间。
// src/index.js
import { heavyFunction } from './heavy-module';
// 动态导入示例
const loadModule = async () => {
const module = await import('./large-library');
module.init();
};
loadModule();在这个例子中，index.js 是入口，heavyFunction 可能在打包时被 tree-shaking 掉如果没被调用。而 large-library 通过动态 import() 被分割成一个单独的 chunk（如 0.chunk.js），只有在 loadModule 被调用时才会请求该文件。这种组合使用实现了代码分割和按需加载。
当动态导入的模块包含副作用时会发生什么
如果动态导入的模块执行了全局副作用（如修改 window 对象或注册事件监听），Tree Shaking 可能无法安全地移除该模块中的其他未使用代码，因为副作用的存在使得静态分析变得复杂。此时，需要确保模块本身是无副作用的，或者在 package.json 中明确声明 sideEffects。
// large-library.js (有副作用)
window.customGlobal = true;
export function init() { console.log('init'); }如果 large-library.js 包含上述副作用，即使 init 未被直接调用，整个模块也可能被保留以确保副作用执行。若希望 Tree Shaking 生效，应重构代码，将副作用与纯逻辑分离，或在 package.json 中设置 "sideEffects": false 仅当确认所有文件均无副作用时。
