Webpack 中已引入但未使用的模块会被打包吗？

Webpack 默认情况下会打包所有 import 的模块，不论是否使用。通过 Tree Shaking 技术可以在生产模式或手动配置下优化移除未使用代码。

工程化与构建 中等 Webpack Tree Shaking 优化

通常情况下，在Webpack的默认配置下，它会将该模块打包到输出的bundle文件中，无论该模块在代码中是否被实际使用。这是因为Webpack在构建过程中会解析所有入口模块及其关联的import语句依赖关系，并针对每个导入进行处理和包含到最终打包文件。然而，这种行为可能涉及性能浪费，特别是在未优化的开发模式中。

Webpack提供了Tree Shaking技术来移除未使用的代码，主要包括以下优化方法：

  • 生产模式自动开启：当设置 mode: 'production' 时，Webpack会启用Tree Shaking，基于静态分析去除未实际使用的模块代码。
  • 手动配置优化：在Webpack配置文件中使用 optimization.usedExports 选项来控制： 
    module.exports = {
optimization: {
  usedExports: true  // 只打包被使用的代码段
}
}
  • 高级控制：结合 sideEffects 属性和代码结构优化： 
    import { specificFunction } from 'module';  // 优先用命名导入便于识别

    并配合package.json声明：

    {
"sideEffects": false  // 告诉Webpack模块无副作用可安全移除
}

但在以下场景下需注意优化限制：

  1. 动态导入无效时：如使用条件加载模块的方式(如动态 import())，可能导致Tree Shaking失效。
  2. 无法识别语句：未模块化的全局引用或未正确导出时分析可能出错。