JavaScript 打包详解
你使用许多文件来编写 React 或 Angular 应用。你拥有组件、服务和库。这种组织方式对你很有帮助。
浏览器并不关心你的文件夹结构。如果你加载 200 个文件，浏览器就会发起 200 次网络请求。这会让你的应用变慢。
打包工具（Bundlers）解决了这个问题。打包工具获取你的代码、导入语句和模块，并将它们合并成一个或几个小文件。这使得加载变得高效。
现代打包工具不仅仅是合并文件：
• 代码压缩 (Minification)：它会移除多余的空格和注释，并缩短变量名以减小文件体积。 • Tree shaking (摇树优化)：它会移除你从未使用的代码，从库中剔除未使用的函数。 • 代码分割 (Code splitting)：它将代码拆分成小的代码块。浏览器只加载用户当前需要的内容。
更小的文件意味着更快的应用。
目前有两种主要的工具：Webpack 和 Vite。
Webpack 在提供服务之前会对整个应用进行打包。这非常适合大型遗留项目。它很灵活，但在大型项目中可能会感觉很慢。
Vite 是现代化的选择。在开发过程中，它直接提供文件服务。它只更新你修改过的文件，这使得更新是即时的。在生产环境中，Vite 使用 Rollup 来创建快速的打包文件。
对比：
Webpack:
- 开发速度：较慢
- 配置：复杂
- 最适合：大型遗留项目
Vite:
- 开发速度：快
- 配置：简单
- 最适合：新的现代项目
新项目请使用 Vite。
每个打包工具都遵循三个步骤：
- 构建依赖图：它映射每个文件如何与其他文件连接。
- 代码转换：它将 TypeScript 或 JSX 转换为纯 JavaScript。
- 输出打包文件：它将所有内容合并并压缩到一个文件夹中，以便进行部署。
通过以下步骤保持你的打包文件精简：
• 懒加载 (Lazy loading)：仅在用户导航到组件时才加载它们。 • 部分导入 (Partial imports)：不要导入整个库，只导入你需要的特定函数。 • 分析 (Analyze)：使用工具查看打包文件中哪些内容占用了空间。 • 生产环境构建 (Production builds)：始终部署生产环境构建版本。开发环境构建版本体积太大。
打包通过为浏览器提供更少、更小的文件，使你的应用性能更好。
来源：https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p