如何将 css 从 Application bundle 资源中剥离出来
如何将 css 从 Application bundle 资源中剥离出来
为了提高 Angular 加载性能，一种思路就是按需加载 CSS 样式表，而不是把它们打包到 application bundle 中去。
Web 应用的 Application Bundle 是一个包含所有应用程序代码和资源的文件集合，它们被打包在一起以便于部署和分发。Application Bundle 通常包含 HTML、CSS 和 JavaScript 文件，以及任何相关的图像、字体和其他静态资源。
Application Bundle 的主要目的是让 Web 应用程序可以独立运行，而不需要依赖于特定的服务器或环境。这使得开发人员可以轻松地将应用程序部署到不同的服务器上，或将其分发给其他用户。
Web 应用的 Application Bundle 通常包含了应用程序的代码、样式、图像、字体、配置文件等资源，以及一个 HTML 文件，作为应用程序的入口点。此外，它还可以包含一些用于配置应用程序运行环境的文件，比如 JavaScript 包管理器的配置文件、服务器配置文件等。
Web 应用的 Application Bundle 可以通过各种方式分发，例如通过 Web 服务器提供下载、通过应用商店发布、通过 P2P 分发等方式。在使用 Application Bundle 时，用户可以方便地安装和卸载应用程序，而无需手动配置运行环境或处理依赖项。同时，开发人员也可以使用 Application Bundle 来简化应用程序的部署过程，提高开发效率和用户体验。
常见的 Application Bundle 格式包括 ZIP、TAR 和 JAR 等。另外，现代 Web 应用程序框架，如 React、Vue 和 Angular 等，也提供了内置的工具和命令行接口，可以帮助开发人员轻松地构建和打包应用程序。
假设我有一个 Angular 应用，除了 main.css 之外，我还有下面两个 css 文件：
- src/styles/themes/theme-light.css
- src/styles/themes/theme-dark.css Next, you would have them in angular.json’s styles option:
这些 css 文件出现在 angular.json 文件的 styles 区域：
"styles": [
"src/styles.css",
"src/styles/themes/theme-light.css",
"src/styles/themes/theme-dark.css"
]默认情况下，这些 css 都是 Application bundle 的一部分。
对 angular.json 做一些简单的修改，可以让 css 按需加载：
"styles": [
"src/styles.css",
{
"input": "src/styles/themes/theme-light.css",
"inject": false,
"bundleName": "theme-light"
},
{
"input": "src/styles/themes/theme-dark.css",
"inject": false,
"bundleName": "theme-dark"
}
]两个新的 option：
- inject: 设置这个 false 将不会包含来自“input”路径的文件在 bundle 中
- bundleName：将创建一个单独的包，其中包含来自“输入”路径的样式表
重新执行 ng build，会发现这两个 css 文件构建生成了额外的 bundle 文件：
[图片]