为什么需要打包?

Why

现代开发中，我们似乎习惯了，任何项目都需要打包才能发布或者上线，我们来看一下需要打包的几点原因。

体积

打包的一大原因是，产物的体积通常会比打包前小很多。所以当我们发布产物到公开平台上，不管是从分发还是接收来说，速度上都会快很多。

体积还包括文件的合并，通常打包会将多个模块或文件合并成一个。

还有其他方式，譬如 tree-shaking 可以在不影响源代码功能的情况下，最大情况减小源代码的体积

混淆

程序的源代码通常运行在用户本地，所以不可避免会暴露源码给用户。分发前让代码混淆，让代码变得更难以阅读和理解，这样，即使代码暴露给用户，从源码中破解信息的难度会增大很多。

编译

如果说前两者不是那么必要的话，“编译” 几乎是现代工程需要打包的一个最重要的原因了。通常我们会用一些平台不能直接使用的 “工具” 来提高我们的效率。

譬如对于浏览器来说，只原生支持 HTML/CSS/JavaScript 等，但是我们会使用 TypeScript 来保证类型安全和提升可维护性而不是原生的 JavaScript、使用 less/sass 等来替代 CSS、使用 vue/react 而不是纯 html 来构建前端页面。

这些都帮助我们提高了效率，但是原生平台不直接支持这些，所以我们需要“编译”这一个过程，来得到能直接运行的代码。

“编译”还包括对同类型代码的转化，例如我们可能会使用 bable 来对 JS 代码进行降级处理，提高浏览器的兼容性。使用 post-css 来对 CSS 进行降级处理。

代价

打包的好处不言而喻，但同时也有一定的代价，但是这些工具也在尽可能地解决这些问题

速度

速度一直是各个打包工具的热门追求目标和竞争点。随着项目规模的增长，打包速度的优化可以明显改善开发体验。

在之前 Webpack 一统天下的时候，一个大型项目可能启动需要十几分钟甚至更久，现在 ESM 时代以及有 vite/esbuild 等工具的出现，情况改观了很多。

sourcemap

打包后通常会丢失源码的结构，这使得本地开发的时候，难以定位报错的源码位置，打包工具就需要提供 soucemap 产物来辅助开发