Webpack 4打包体积超限：小源文件为何生成大bundle及优化方法

兄弟，这个问题我太熟了！咱先拆解下核心原因：

• 全量引入Lodash是头号元凶：你写的import _ from 'lodash'会把整个Lodash库（未压缩状态下大概500KB+）全打包进去，但你其实只用到了join这一个方法，这完全是浪费空间啊！
• Webpack开发模式的“臃肿”属性：Webpack 4默认是development模式，这个模式优先保障开发体验，会保留大量调试用的Source Map、未压缩的代码，还会禁用很多优化手段，所以体积自然会飙升。
• Webpack运行时代码的额外开销：虽然你的源文件只有几百字节，但Webpack本身需要打包一些模块解析、运行时的支撑代码进去，不过这部分占比不大，主要还是前两个原因导致的体积爆炸。

给你几个实用的优化方案，按优先级来：

• 按需引入Lodash，只打包你用到的部分
  • 最简单的手动方式：直接引入单个方法，比如把import _ from 'lodash'改成import join from 'lodash/join'，然后把代码里的_.join换成join，这样Lodash部分打包后只有几KB。
  • 更省心的自动方式：用babel-plugin-lodash配合Babel，配置好后你依然可以写import _ from 'lodash'，插件会自动帮你把用到的方法单独打包，不用改业务代码。
• 切换到生产模式打包
  • 直接在打包命令里加--mode production，比如webpack --mode production，或者在webpack.config.js里设置mode: 'production'。生产模式会自动开启一堆优化：
    • 代码压缩（TerserPlugin）：把代码压缩混淆，去掉空格、注释，把长变量名改成短的，直接砍半甚至更多体积。
    • Tree Shaking：自动扫描并删除没用到的冗余代码。
    • 默认禁用Source Map：如果需要调试可以单独配置，但默认会去掉这部分体积。
• 用Bundle分析工具揪出“大胖子”模块
  • 安装webpack-bundle-analyzer插件，配置后打包时会弹出一个可视化网页，清晰显示每个模块的体积占比，帮你精准定位体积问题。
• 拆分第三方依赖包
  • 在webpack.config.js的optimization.splitChunks里配置，把Lodash这类第三方库拆成单独的vendor.bundle.js，这样用户第一次加载后，后续访问可以利用浏览器缓存，不用重复加载，同时也减小了主bundle的体积。

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