Generating browser application bundles 的 sealing 阶段

西门吹雪在编程

于 2024-09-03 19:31:49 发布

阅读量1.3k

点赞数 20

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签： Angular

本文链接：https://blog.csdn.net/m0_55213370/article/details/141869813

当你在使用 npm 构建一个 TypeScript 项目时，发现 console 上出现了 Generating browser application bundles(phase: sealing)...，这就触及到了构建工具、编译过程和打包阶段的一个关键步骤。这条消息透露出几个重要的信息点：生成浏览器应用程序包、打包阶段以及封装阶段。为了更详细地了解其中的奥秘，我们需要从多个层面进行探讨，包括 npm、TypeScript 和现代前端框架如 Angular、React 或 Vue.js 的构建流程。

npm 构建和打包流程

npm 是 Node.js 的包管理工具，但它的功能远不止于此。通过 npm script，你可以自动化很多开发任务。构建一个 TypeScript 项目通常会涉及多个步骤，包括依赖安装、代码转换、打包、优化等。Generating browser application bundles 一般来说是通过某个构建工具（如 Webpack、Parcel 或者是前端框架自带的 CLI 工具）进行的。

使用 Angular CLI 的例子

以 Angular 项目为例，当你运行 ng build 命令时，Angular CLI 本质上调用了一系列操作来编译、打包你的项目。整个过程如下：

代码转换（Transpilation）：TypeScript 会被转换成 JavaScript，这通常会通过 tsc（TypeScript 编译器）来实现。
- TypeScript 代码被解析（Parsing），生成 AST（抽象语法树）。
- AST 经过一系列转换生成 JavaScript 代码。
- 生成的 JavaScript 代码可以直接运行在浏览器里。
模块打包（Bundling）：将多个模块打包成少量甚至一个 JavaScript 文件。这是为了提高浏览器的加载效率。
- 平时我们可能会按模块拆分代码，以便于开发和维护。但浏览器加载时，多个小文件会增加 HTTP 请求次数，影响性能。
- Webpack 或其他打包工具会将这些模块打包成若干个 bundle，通常把应用代码、第三方库代码分别打包。
优化和压缩（Optimization and Minification）：为了在生产环境中更快速和高效地加载，代码会被压缩。
- 删除多余的空白符、注释，甚至是用更短的变量名替换原有的变量名。
- 此外还可能进行一些高级优化，比如代码分割（Code Splitting）和延迟加载（Lazy Loading）。