如何为特定模块跳过/忽略Babel优化？Preact+Firebase构建耗时问题

可以通过以下几种方式针对性处理，避免Firebase模块拖慢构建速度：

• 改用Firebase模块化SDK（v9+）
  Firebase v9及以上采用了模块化设计，天生支持树摇（Tree Shaking），只会打包你实际用到的功能模块，而非全量引入。比如只导入需要的服务：

  import { initializeApp } from 'firebase/app';
  import { getAuth } from 'firebase/auth';
  import { getFirestore } from 'firebase/firestore';
  

  这种方式能大幅减少构建时需要处理的代码量，直接缩短构建时间。

• 配置构建工具跳过Firebase模块的优化
  如果你用的是Vite，可以在vite.config.js里将Firebase相关模块排除在依赖预优化之外：

  export default {
    optimizeDeps: {
      exclude: ['firebase/app', 'firebase/auth', 'firebase/firestore']
    }
  }
  

  若是Webpack，则可以通过noParse配置跳过对Firebase模块的解析：

  module.exports = {
    module: {
      noParse: /firebase\/app|firebase\/auth|firebase\/firestore/
    }
  }
  

  这样构建工具不会对这些模块做额外的优化处理，节省时间。

• 确保按需导入而非全量引入
  如果你还在使用旧版命名空间SDK，不要全量导入整个Firebase库，只导入核心app和需要的服务：

  import firebase from 'firebase/app';
  import 'firebase/auth';
  import 'firebase/firestore';
  

  避免import * as firebase from 'firebase'这种全量引入的写法，减少不必要的代码处理。

• 验证构建缓存是否正常工作
  检查你的构建工具缓存配置（比如Vite的cacheDir、Webpack的cache选项），确保缓存机制正常，这样Firebase模块只会在首次构建时被处理，后续构建直接复用缓存结果。

内容的提问来源于stack exchange，提问作者João Sequeira