乐趣区

关于前端:如何将-css-从-Application-bundle-资源中剥离出来

jiezi

为了进步 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 文件：

退出移动版