填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

Angular 工作區配置

Angular workspace configuration

Angular 工作區根目錄下的 angular.json 檔案提供了全工作區級的配置和具體專案的預設配置,供 Angular CLI 中的建構工具和開發工具使用。 此配置中所提供的路徑值都是相對於工作區根目錄的。

A file named angular.json at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI. Path values given in the configuration are relative to the root workspace folder.

JSON 的總體結構

Overall JSON structure

angular.json 的最上層,一些屬性用於配置工作區,其中的 projects 區則包含其餘的針對每個專案的配置項。CLI 在工作空間級的預設設定可以被專案級的設定所覆蓋,而專案級的設定可以被命令列中的設定所覆蓋。

At the top level of angular.json, a few properties configure the workspace, and a projects section contains the remaining per-project configuration options. CLI defaults set at the workspace level can be overridden by defaults set at the project level, and defaults set at the project level can be overridden on the command line.

下列屬性位於檔案的最上層,用於配置工作空間。

The following properties, at the top level of the file, configure the workspace.

  • version:該配置檔案的版本。

    version: The configuration-file version.

  • newProjectRoot:用來建立新工程的位置。絕對路徑或相對於工作區目錄的路徑。

    newProjectRoot: Path where new projects are created. Absolute or relative to the workspace folder.

  • defaultProject:當命令中沒有指定引數時,要使用的預設工程名。當你用 ng new 在新的工作區中建立新應用時,該應用就會一直作為此工作區的預設專案,除非你到這裡修改它。

    defaultProject: Default project name to use in commands, where not provided as an argument. When you use ng new to create a new app in a new workspace, that app is the default project for the workspace until you change it here.

  • schematics:一組原理圖,用於訂製 ng generate 子命令在本工作空間中的預設選項。參閱稍後的產生器原理圖

    schematics : A set of schematics that customize the ng generate sub-command option defaults for this workspace. See Generation schematics below.

  • projects:對於工作區中的每個專案(應用或函式庫)都會包含一個子分區,子分區中是每個專案的配置項。

    projects : Contains a subsection for each project (library or application) in the workspace, with the per-project configuration options.

你透過 ng new app_name 命令建立的初始應用會列在 projects 目錄下:

The initial app that you create with ng new app_name is listed under "projects":

"projects": { "app_name": { ... } ... }
      
      "projects": {
  "app_name": {
    ...
  }
  ...
}
    

你使用 ng generate application 建立的每個應用都有相應的端到端測試專案,它有自己的配置節。當你使用 ng generate library 建立函式庫專案時,函式庫專案也會新增到 projects 節。

Each additional app that you create with ng generate application has a corresponding end-to-end test project, with its own configuration section. When you create a library project with ng generate library, the library project is also added to the projects section.

請注意,配置檔案的 projects 節與工作區的檔案結構並不完全對應。

Note that the projects section of the configuration file does not correspond exactly to the workspace file structure.

  • ng new 建立的這個初始應用位於工作區檔案結構的最上層。

    The initial app created by ng new is at the top level of the workspace file structure.

  • 其它應用和函式庫位於工作區的 projects 資料夾中。

    Additional applications and libraries go into a projects folder in the workspace.

    欲知詳情,參閱工作區和專案檔案結構

    For more information, see Workspace and project file structure.

嚴格模式

Strict mode

當你建立新的工作空間和專案時,你可以透過一個選項來使用 Angular 的嚴格模式,它可以幫你編寫更好、更容易維護的程式碼。 欲知詳情,請參閱嚴格模式

When you create new workspaces and projects, you have the option to use Angular's strict mode, which can help you write better, more maintainable code. For more information, see Strict mode.

專案配置選項

Project configuration options

每個專案的 projects:<project_name> 下都有以下最上層配置屬性。

The following top-level configuration properties are available for each project, under projects:<project_name>.

"my-app": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": {}, "architect": {} }
      
      "my-app": {
  "root": "",
  "sourceRoot": "src",
  "projectType": "application",
  "prefix": "app",
  "schematics": {},
  "architect": {}
}
    

屬性

PROPERTY

說明

DESCRIPTION

root

該專案的根資料夾,相對於工作區資料夾的路徑。初始應用的值為空,因為它位於工作區的最上層。

The root folder for this project's files, relative to the workspace folder. Empty for the initial app, which resides at the top level of the workspace.

sourceRoot

該專案原始檔的根資料夾。

The root folder for this project's source files.

projectType

"application" 或 "library" 之一。應用可以在瀏覽器中獨立執行,而函式庫則不行。

One of "application" or "library". An application can run independently in a browser, while a library cannot.

prefix

Angular 所產生的選擇器的字首字串。可以自訂它,以作為應用或功能區的標識。

A string that Angular prepends to generated selectors. Can be customized to identify an app or feature area.

schematics

一組原理圖(schematic),它可以為該專案自訂 ng generate 子命令的預設選項。

A set of schematics that customize the ng generate sub-command option defaults for this project. See Generation schematics below.

architect

為本專案的各個建構器目標配置預設值。

Configuration defaults for Architect builder targets for this project.

產生器原理圖

Generation schematics

Angular 產生器的原理圖是一組用來修改專案的指南,包括新增新檔案或修改現有檔案。 預設情況下,Angular CLI 的 ng generate 子命令會從 @angular 套件中收集原理圖。 可以用 schematic-package:schematic-name 格式來為子命令指定原理圖名稱;比如,用來產生元件的原理圖名叫 @angular:component

Angular generation schematics are instructions for modifying a project by adding files or modifying existing files. Individual schematics for the default Angular CLI ng generate sub-commands are collected in the package @angular. Specify the schematic name for a subcommand in the format schematic-package:schematic-name; for example, the schematic for generating a component is @angular:component.

供 CLI 產生專案及其部件的預設原理圖的 JSON 模式(schema)位於 @schematics/angular套件中。 這個模式描述了 CLI ng generate 子命令的每個選項,它們會顯示在 --help 的輸出中。

The JSON schemas for the default schematics used by the CLI to generate projects and parts of projects are collected in the package @schematics/angular. The schema describes the options available to the CLI for each of the ng generate sub-commands, as shown in the --help output.

這個模式中的每個欄位都對應於 CLI 子命令選項的引數取值範圍和預設值。 你可以修改此名稱空間的模式檔案,來為某個子命令選項指定另外的預設值。

The fields given in the schema correspond to the allowed argument values and defaults for the CLI sub-command options. You can update your workspace schema file to set a different default for a sub-command option.

專案工具的配置選項

Project tool configuration options

建築師(Architect)是 CLI 用來執行復雜任務(例如編譯和測試執行)的工具。 Architect 是一個根據目標配置執行指定的建構器以完成指定任務的外殼。你可以定義和配置新的建構器和目標以擴充套件 CLI。請參閱 Angular CLI 建構器

Architect is the tool that the CLI uses to perform complex tasks, such as compilation and test running. Architect is a shell that runs a specified builder to perform a given task, according to a target configuration. You can define and configure new builders and targets to extend the CLI. See Angular CLI Builders.

預設的建築師建構器和目標

Default Architect builders and targets

Angular 定義了用於特定 CLI 命令或常規 ng run 命令的預設建構器。為每個預設建構器定義選項和預設值的 JSON 模式收集在@angular-devkit/build-angular套件中。這些架構為以下建構器配置選項。

Angular defines default builders for use with specific CLI commands, or with the general ng run command. The JSON schemas that the define the options and defaults for each of these default builders are collected in the @angular-devkit/build-angularpackage. The schemas configure options for the following builders.

  • app-shell

  • browser

  • dev-server

  • extract-i18n

  • karma

  • protractor

  • server

  • tslint

配置建構器目標

Configuring builder targets

angular.jsonarchitect 部分包含一組建築目標。很多目標都對應於執行它們的 CLI 命令。使用 ng run 命令可以執行一些額外的預定義目標,並可以定義自己的目標。

The architect section of angular.json contains a set of Architect targets. Many of the targets correspond to the CLI commands that run them. Some additional predefined targets can be run using the ng run command, and you can define your own targets.

每個目標物件都指定了該目標的 builder,它是建築師所執行工具的 npm 套件。此外,每個目標都有一個 options 部分,用於配置該目標的預設選項,configurations 部分可以為目標命名並指定備用配置。參閱稍後的建構目標部分的例子。

Each target object specifies the builder for that target, which is the npm package for the tool that Architect runs. In addition, each target has an options section that configures default options for the target, and a configurations section that names and specifies alternative configurations for the target. See the example in Build target below.

"architect": { "build": { }, "serve": { }, "e2e" : { }, "test": { }, "lint": { }, "extract-i18n": { }, "server": { }, "app-shell": { } }
      
      "architect": {
  "build": { },
  "serve": { },
  "e2e" : { },
  "test": { },
  "lint": { },
  "extract-i18n": { },
  "server": { },
  "app-shell": { }
}
    
  • architect/build 節會為 ng build 命令的選項配置預設值。更多資訊,參閱稍後的建構目標部分。

    The architect/build section configures defaults for options of the ng build command. See Build target below for more information.

  • architect/serve 節會覆蓋建構預設值,並為 ng serve 命令提供額外的伺服器預設值。除了 ng build 命令的可用選項之外,還增加了與開發伺服器有關的選項。

    The architect/serve section overrides build defaults and supplies additional serve defaults for the ng serve command. In addition to the options available for the ng build command, it adds options related to serving the app.

  • architect/e2e 節覆蓋了建構選項預設值,以便用 ng e2e 命令建構端到端測試應用。

    The architect/e2e section overrides build-option defaults for building end-to-end testing apps using the ng e2e command.

  • architect/test 節會覆蓋測試時的建構選項預設值,並為 ng test 命令提供額外的預設值以供執行測試。

    The architect/test section overrides build-option defaults for test builds and supplies additional test-running defaults for the ng test command.

  • architect/lint 節為 ng lint 命令配置了預設值,用於對專案原始檔進行程式碼分析。Angular 預設的 linting 工具為 TSLint

    The architect/lint section configures defaults for options of the ng lint command, which performs code analysis on project source files. The default linting tool for Angular is TSLint.

  • architect/extract-i18n 節為 ng xi18n 命令所用到的 ng-xi18n 工具選項配置了預設值,該命令用於從原始碼中提取帶標記的訊息串,並輸出翻譯檔案。

    The architect/extract-i18n section configures defaults for options of the ng extract-i18n command, which extracts marked message strings from source code and outputs translation files.

  • architect/server 節用於為使用 ng run <project>:server 命令建立帶伺服器端渲染的 Universal 應用配置預設值。

    The architect/server section configures defaults for creating a Universal app with server-side rendering, using the ng run <project>:server command.

  • architect/app-shell 部分使用 ng run <project>:app-shell 命令為漸進式 Web 應用(PWA)配置建立應用外殼的預設值。

    The architect/app-shell section configures defaults for creating an app shell for a progressive web app (PWA), using the ng run <project>:app-shell command.

一般來說,可以為 CLI 參考手冊中列出的每個命令配置相應的預設值。注意,配置檔案中的所有選項都必須使用 camelCase,而不是 dash-case。

In general, the options for which you can configure defaults correspond to the command options listed in the CLI reference page for each command. Note that all options in the configuration file must use camelCase, rather than dash-case.

建構目標

Build target

architect/build 節會為 ng build 命令的選項配置預設值。它具有下列最上層屬性。

The architect/build section configures defaults for options of the ng build command. It has the following top-level properties.

屬性

PROPERTY

說明

DESCRIPTION

builder

用於建構此目標的建構工具的 npm 套件。預設為 @angular-devkit/build-angular:browser,它使用的是 webpack 打包器。

The npm package for the build tool used to create this target. The default builder for an application (ng build myApp)is @angular-devkit/build-angular:browser, which uses the webpack package bundler. Note that a different builder is used for building a library (ng build myLib).

options

本節包含建構選項的預設值,當沒有指定命名的備用配置時使用。參閱下面的預設建構選項

This section contains default build target options, used when no named alternative configuration is specified. See Default build targets below.

configurations

本節定義並命名針對不同目標的備用配置。它為每個命名配置都包含一節,用於設定該目標環境的預設選項。參閱下面的備用的建構配置

This section defines and names alternative configurations for different intended destinations. It contains a section for each named configuration, which sets the default options for that intended environment. See Alternate build configurations below.

備用的建構配置

Alternate build configurations

預設情況下,會定義一個 production 配置,ng build 命令會使用該配置下的 --prod 選項。這裡的 production 配置會設定各種預設值來優化應用,例如打包檔案、最小化多餘空格、移除註釋和死程式碼,以及重寫程式碼以使用簡短的名字(“minification”)。

By default, a production configuration is defined, and the ng build command has --prod option that builds using this configuration. The production configuration sets defaults that optimize the app in a number of ways, such as bundling files, minimizing excess whitespace, removing comments and dead code, and rewriting code to use short, cryptic names ("minification").

你可以定義和命名適用於你的開發過程的其它備用配置(例如 stage)。其它建構配置的一些例子是 AIO 自己使用的 stablearchivenext,以及建構本地化版本應用所需的各個與區域有關的配置置。欲知詳情,參閱國際化(i18n)

You can define and name additional alternate configurations (such as stage, for instance) appropriate to your development process. Some examples of different build configurations are stable, archive and next used by AIO itself, and the individual locale-specific configurations required for building localized versions of an app. For details, see Internationalization (i18n).

你可以透過將它們的名稱傳給 --configuration 命令列標誌來選擇替代配置。

You can select an alternate configuration by passing its name to the --configuration command line flag.

你還可以用逗號分隔的列表傳入多個配置名稱。例如,要同時應用 stagefr 建構配置,請使用命令 ng build --configuration stage,fr。在這種情況下,該命令從左到右解析命名的配置。如果多個配置更改了同一個設定,則最後設定的值生效。

You can also pass in more than one configuration name as a comma-separated list. For example, to apply both stage and fr build configurations, use the command ng build --configuration stage,fr. In this case, the command parses the named configurations from left to right. If multiple configurations change the same setting, the last-set value is the final one.

如果還使用了 --prod 命令列標誌,則將首先應用它,並且可以透過 --configuration 標誌指定的任何配置覆蓋其設定。

If the --prod command line flag is also used, it is applied first, and its settings can be overridden by any configurations specified via the --configuration flag.

額外的建構和測試選項

Additional build and test options

ng buildng serveng test命令的可配置選項通常與 ng buildng serveng test命令的可用選項一一對應。關於這些選項及其取值範圍的更多資訊,參閱“ CLI 參考手冊”

The configurable options for a default or targeted build generally correspond to the options available for the ng build, ng serve, and ng testcommands. For details of those options and their possible values, see the CLI Reference.

一些額外的選項(如下所列)只能透過配置檔案來設定,可以直接編輯,也可以使用 ng config命令。

Some additional options can only be set through the configuration file, either by direct editing or with the ng configcommand.

選項屬性

OPTIONS PROPERTIES

說明

DESCRIPTION

assets

一個物件,包含一些用於新增到專案的全域性上下文中的靜態檔案路徑。它的預設路徑指向專案的圖示檔案及專案的 assets 資料夾。參閱稍後的專案資產(asset)配置部分。

An object containing paths to static assets to add to the global context of the project. The default paths point to the project's icon file and its assets folder. See more in Assets configuration below.

styles

一個物件,包含一些要新增到專案全域性上下文中的樣式檔案。Angular CLI 支援 CSS 匯入和所有主要的 CSS 前處理器: sass/scsslessstylus。參閱稍後的 樣式和指令碼配置部分。

An array of style files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors: sass/scss, less, and stylus. See more in Styles and scripts configuration below.

stylePreprocessorOptions

一個物件,包含要傳給樣式前處理器的選項"值-對"。參閱稍後的 樣式和指令碼配置 部分。

An object containing option-value pairs to pass to style preprocessors. See more in Styles and scripts configuration below.

scripts

一個物件,包含一些 JavaScript 指令碼檔案,用於新增到專案的全域性上下文中。這些指令碼的載入方式和在 index.html<script> 標籤中新增是完全一樣的。參閱稍後的 樣式和指令碼配置 部分。

An object containing JavaScript script files to add to the global context of the project. The scripts are loaded exactly as if you had added them in a <script> tag inside index.html. See more in Styles and scripts configuration below.

budgets

全部或部分應用的預設尺寸預算的型別和閾值。當建構的輸出達到或超過閾值大小時,你可以將建構器配置為報告警告或錯誤。參閱配置尺寸預算。(不適用於 test 部分。)

Default size-budget type and threshholds for all or parts of your app. You can configure the builder to report a warning or an error when the output reaches or exceeds a threshold size. See Configure size budgets. (Not available in test section.)

fileReplacements

一個物件,包含一些檔案及其編譯時替代品。參閱為指定的目標配置檔案替換規則 部分。

An object containing files and their compile-time replacements. See more in Configure target-specific file replacements.

複雜配置的值

Complex configuration values

選項 assetsstylesscripts 的值可以是簡單的路徑字串,也可以是帶有特定欄位的物件值。可以使用命令標誌將 sourceMapoptimization 選項設定為簡單的布林值,但也可以使用配置檔案為其指定複雜的值。以下各節提供了在每種情況下如何使用這些複數值的詳細資訊。

The options assets, styles, and scripts can have either simple path string values, or object values with specific fields. The sourceMap and optimization options can be set to a simple Boolean value with a command flag, but can also be given a complex value using the configuration file. The following sections provide more details of how these complex values are used in each case.

專案資產(asset)配置

Assets configuration

每個 build 目標配置都可以包含一個 assets 陣列,它列出了當你建構專案時要複製的檔案或資料夾。預設情況下,會複製 src/assets/ 資料夾和 src/favicon.ico

Each build target configuration can include an assets array that lists files or folders you want to copy as-is when building your project. By default, the src/assets/ folder and src/favicon.ico are copied over.

"assets": [ "src/assets", "src/favicon.ico" ]
      
      "assets": [
  "src/assets",
  "src/favicon.ico"
]
    

要排除某個資產,可以從這份資產配置中刪除它。

To exclude an asset, you can remove it from the assets configuration.

你可以透過把資產指定為物件的形式來進一步配置要複製的資產,而不僅是相對於工作空間根目錄的路徑。一個資產物件可以包含如下欄位。

You can further configure assets to be copied by specifying assets as objects, rather than as simple paths relative to the workspace root. A asset specification object can have the following fields.

  • glob:一個 node-glob 它使用 input 作為基準目錄。

    glob: A node-glob using input as base directory.

  • input:相對於工作空間根目錄的路徑。

    input: A path relative to the workspace root.

  • output:相對於 outDir 的路徑(預設為 dist/project-name )。為了杜絕安全隱患,CLI 永遠不會在專案輸出路徑之外寫檔案。

    output: A path relative to outDir (default is dist/project-name). Because of the security implications, the CLI never writes files outside of the project output path.

  • ignore:要排除的 glob 列表。

    ignore: A list of globs to exclude.

例如,可以使用如下物件來更詳細地表達預設的資產路徑。

For example, the default asset paths can be represented in more detail using the following objects.

"assets": [ { "glob": "**/*", "input": "src/assets/", "output": "/assets/" }, { "glob": "favicon.ico", "input": "src/", "output": "/" } ]
      
      "assets": [
  {
    "glob": "**/*",
    "input": "src/assets/",
    "output": "/assets/"
  },
  {
    "glob": "favicon.ico",
    "input": "src/",
    "output": "/"
  }
]
    

你可以使用此擴充套件配置從專案外部複製資產。例如,以下配置會從 node 套件中複製資產:

You can use this extended configuration to copy assets from outside your project. For example, the following configuration copies assets from a node package:

"assets": [ { "glob": "**/*", "input": "./node_modules/some-package/images", "output": "/some-package/" } ]
      
      "assets": [
 {
   "glob": "**/*",
   "input": "./node_modules/some-package/images",
   "output": "/some-package/"
 }
]
    

node_modules/some-package/images/ 中的內容將會複製到 dist/some-package/ 中。

The contents of node_modules/some-package/images/ will be available in dist/some-package/.

下面的例子使用 ignore 欄位排除了 assets 資料夾中的某些特定檔案,防止它們被複制到 build 中:

The following example uses the ignore field to exclude certain files in the assets folder from being copied into the build:

"assets": [ { "glob": "**/*", "input": "src/assets/", "ignore": ["**/*.svg"], "output": "/assets/" } ]
      
      "assets": [
 { 
   "glob": "**/*",
   "input": "src/assets/",
   "ignore": ["**/*.svg"],
   "output": "/assets/" 
 }
]
    

樣式和指令碼配置

Styles and scripts configuration

stylesscripts 選項的陣列型條目可以是簡單的路徑字串,也可以是指向額外入口點檔案的物件。 其關聯的建構器將在建構過程中將該檔案及其依賴項作為單獨的捆綁套件進行載入。 對於配置物件,你可以選擇使用 bundleName 欄位為該入口點命名捆綁套件。

An array entry for the styles and scripts options can be a simple path string, or an object that points to an extra entry-point file. The associated builder will load that file and its dependencies as a separate bundle during the build. With a configuration object, you have the option of naming the bundle for the entry point, using a bundleName field.

預設情況下捆綁套件會被注入這裡,但是你可以將 inject 設定為 false,以將捆綁套件從注入中排除。例如,以下物件值將建立並命名包含樣式和指令碼的套件,並將其從注入中排除:

The bundle is injected by default, but you can set inject to false to exclude the bundle from injection. For example, the following object values create and name a bundle that contains styles and scripts, and excludes it from injection:

"styles": [ { "input": "src/external-module/styles.scss", "inject": false, "bundleName": "external-module" } ], "scripts": [ { "input": "src/external-module/main.js", "inject": false, "bundleName": "external-module" } ]
      
      "styles": [
  {
    "input": "src/external-module/styles.scss",
    "inject": false,
    "bundleName": "external-module"
  }
],
"scripts": [
  { 
    "input": "src/external-module/main.js",
    "inject": false,
    "bundleName": "external-module"
  }
]
    

你可以混合使用簡單和複雜的檔案參考來獲取樣式和指令碼。

You can mix simple and complex file references for styles and scripts.

"styles": [ "src/styles.css", "src/more-styles.css", { "input": "src/lazy-style.scss", "inject": false }, { "input": "src/pre-rename-style.scss", "bundleName": "renamed-style" }, ]
      
      "styles": [
  "src/styles.css",
  "src/more-styles.css",
  { "input": "src/lazy-style.scss", "inject": false },
  { "input": "src/pre-rename-style.scss", "bundleName": "renamed-style" },
]
    

樣式前處理器選項

Style preprocessor options

在 Sass 和 Stylus 中,你可以同時使用元件樣式和全域性樣式的 includePaths 功能,從而可以新增將用來檢查匯入的額外基本路徑。

In Sass and Stylus you can make use of the includePaths functionality for both component and global styles, which allows you to add extra base paths that will be checked for imports.

要新增路徑,請使用 stylePreprocessorOptions 選項:

To add paths, use the stylePreprocessorOptions option:

"stylePreprocessorOptions": { "includePaths": [ "src/style-paths" ] }
      
      "stylePreprocessorOptions": {
  "includePaths": [
    "src/style-paths"
  ]
}
    

該資料夾中的檔案,例如 src/style-paths/_variables.scss,可以從專案中的任何位置匯入,而無需相對路徑:

Files in that folder, such as src/style-paths/_variables.scss, can be imported from anywhere in your project without the need for a relative path:

// src/app/app.component.scss // A relative path works @import '../style-paths/variables'; // But now this works as well @import 'variables';
      
      // src/app/app.component.scss
// A relative path works
@import '../style-paths/variables';
// But now this works as well
@import 'variables';
    

請注意,如果需要將其用於單元測試,則還需要將這些樣式或指令碼新增到 test 建構器。另請參閱在應用程式內部使用執行時全域性函式庫

Note that you will also need to add any styles or scripts to the test builder if you need them for unit tests. See also Using runtime-global libraries inside your app.

優化和 sourceMap 配置

Optimization and source map configuration

optimizationsourceMap 命令選項是簡單的布林標誌。你可以為這些物件中的任何一個提供物件作為配置值,以提供更詳細的說明。

The optimization and sourceMap browser builder options can be either a Boolean or an Object for more fine-grained configuration. In this section we will explain how to fine tune these options.

  • 標誌 --optimization="true" 適用於指令碼和樣式。你可以提供如下值來對一個或另一個進行優化:

    The optimization option applies to scripts, styles and fonts. You can supply a value such as the following to apply optimization to one or the other:

"optimization": { "scripts": true, "styles": false, "fonts": true }
      
      "optimization": { 
  "scripts": true,
  "styles": false,
  "fonts": true
}
    

字型優化需要網際網路訪問。 當啟用它時,將會把外部 Google 字型和圖示的定義內聯在應用的 HTML 索引檔案中,從而縮減那些阻塞渲染的請求。

Fonts optimization requires internet access. When enabled, render blocking requests will be reduced by inlining external Google fonts and icons CSS definitions in the application's HTML index file.

  • 標誌 --sourceMap="true" 輸出指令碼和樣式的原始碼對映。你可以配置該選項以將其應用於一個或另一個。你還可以選擇輸出隱藏的原始碼對映,或解析提供者軟體套件的原始碼對映。例如:

    The sourceMap option applies for both scripts and styles. You can also choose to output hidden source maps, or resolve vendor package source maps:

"sourceMap": { "scripts": true, "styles": false, "hidden": true, "vendor": true }
      
      "sourceMap": {
  "scripts": true,
  "styles": false,
  "hidden": true,
  "vendor": true
}
    

使用隱藏的原始碼對映時,捆綁套件中不會參考原始碼對映。如果僅希望源對映在錯誤報告工具中對映錯誤堆疊追蹤,而又不想在瀏覽器開發人員工具中公開源對映,則這些選項很有用。

When using hidden source maps, source maps will not be referenced in the bundle. These are useful if you only want source maps to map error stack traces in error reporting tools, but don't want to expose your source maps in the browser developer tools.

對於 Universal,可以透過將樣式優化設定為 true 和將樣式的原始碼對映設定為 false 來減少 HTML 頁面中渲染的程式碼。

For Universal, you can reduce the code rendered in the HTML page by setting styles optimization to true and styles source maps to false.