JavaScript Tree Shaking 包体积怎么对比

通过构建工具（如 webpack 或 vite）的 bundle analyzer 插件，可以直观地对比开启和关闭 tree shaking 后的包体积差异。具体做法是在配置文件中启用 optimization.usedexports 和 sideeffects 标记，并引入 webpack-bundle-analyzer 生成报告，从而分析哪些模块被移除、哪些被保留。

Webpack 中如何配置以启用 Tree Shaking

在 Webpack 中启用 Tree Shaking 需要确保使用 production 模式，并在 module.rules 中设置 type: 'javascript/auto' 或使用 ES Module 语法，同时标记 package.json 中的 sideEffects 字段。这样 Webpack 才能安全地删除未使用的导出代码。

{
  "name": "my-package",
  "version": "1.0.0",
  "sideEffects": false
}

上述配置告诉 Webpack 该包没有副作用，因此可以安全地进行 Tree Shaking。如果某些文件确实有副作用（如全局样式或 polyfills），则需要在数组中列出这些文件，例如 ["./src/styles.css"]。

立即学习“Java免费学习笔记（深入）”；

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

Vite 中如何配置以启用 Tree Shaking

Vite 基于 Rollup 构建，默认支持 Tree Shaking。只需确保导入的是 ES Module 格式的库，并在 vite.config.js 中正确配置 build.rollupOptions.output.manualChunks 来优化分包策略。Vite 会自动处理未使用的代码。

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        }
      }
    }
  }
}

此配置将第三方库打包到单独的 chunk 中，有助于提高缓存命中率和加载性能。同时，Vite 的开发服务器也会利用 HMR 快速反映代码变化。

基于程序中某个输入、条件或结果的具体问题

当程序中存在循环依赖或动态导入时，Tree Shaking 可能无法正确识别未使用的代码。例如，如果使用 import() 动态导入模块，Webpack 可能会将整个模块包含进来，而不是仅包含实际使用的部分。为了解决这个问题，可以使用静态分析工具或手动标记未使用的代码。