ReactJS多文件复用导入及bundle.js体积过大优化方案咨询

我来帮你梳理下针对这种重复导入导致bundle体积超标的问题，几个实用的最佳实践，亲测能有效压缩体积：

• 统一模块导入写法，减少冗余代码
  像你在两个组件里分开导入reactstrap的组件，其实完全可以合并成一次导入：

  // 不推荐的分散写法
  import { Container, Row, Col } from 'reactstrap';
  import { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
  
  // 推荐的合并写法
  import { Container, Row, Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
  

  虽然现代打包工具（比如Webpack）会自动处理重复的模块引用，但统一写法不仅让代码更整洁，也能避免打包过程中不必要的解析开销，同时便于后续维护。

• 开启Tree Shaking，剔除未使用代码
  确保你的打包工具开启了Tree Shaking功能——它能自动识别并移除代码里没被用到的模块部分。比如Webpack在mode: 'production'模式下会默认开启这个功能，前提是你的项目全程使用ES模块的import/export语法（别混用CommonJS的require），这样Tree Shaking才能精准工作，把reactstrap里你没用到的组件都从bundle里删掉。

• 提取公共依赖到独立Chunk
  用打包工具的代码分割功能，把多个组件共享的公共依赖（比如React、reactstrap核心代码）提取到单独的文件里，让它们只被打包一次，所有组件共享引用。以Webpack为例，只需要在配置里开启SplitChunksPlugin：

  module.exports = {
    // ...其他配置项
    optimization: {
      splitChunks: {
        chunks: 'all', // 提取所有类型chunk中的公共依赖
      },
    },
  };
  

  配置后，React、reactstrap这类公共库会被打包到vendors~xxx.js这样的独立文件中，不会在每个组件的bundle里重复出现，大幅减少整体体积。

• 全局样式只导入一次
  你例子里的'react-notifications/lib/notifications.css'在两个组件里都导入了，这会导致样式代码在bundle里重复（虽然浏览器最终只会解析一次，但bundle体积会变大）。建议把这类全局样式移到项目的入口文件（比如index.js）中只导入一次，整个项目就能共用，还能避免冗余打包。

• 按需导入第三方库（针对支持的库）
  有些第三方库支持单独导入具体模块，比如如果是lodash，你可以用import debounce from 'lodash/debounce'代替import { debounce } from 'lodash'，只打包你需要的部分。不过reactstrap本身已经支持Tree Shaking，所以只要开启Tree Shaking就够了，不用单独做按需导入，但这个思路对其他库适用。

这些方法结合起来，应该能快速把你的bundle体积降下来，解决重复导入带来的冗余问题。

内容的提问来源于stack exchange，提问作者Jechanka