5 lines
15 KiB
JSON
5 lines
15 KiB
JSON
|
{
|
||
|
|
"id": "guide/lightweight-injection-tokens",
|
||
|
|
"title": "Optimizing client app size with lightweight injection tokens",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/lightweight-injection-tokens.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"optimizing-client-app-size-with-lightweight-injection-tokens\">Optimizing client app size with lightweight injection tokens<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lightweight-injection-tokens#optimizing-client-app-size-with-lightweight-injection-tokens\"><i class=\"material-icons\">link</i></a></h1>\n<p>This page provides a conceptual overview of a dependency injection technique that is recommended for library developers.\nDesigning your library with <em>lightweight injection tokens</em> helps optimize the bundle size of client applications that use your library.</p>\n<p>You can manage the dependency structure among your components and injectable services to optimize bundle size by using <a href=\"guide/architecture-services#introduction-to-services-and-dependency-injection\">tree-shakable providers</a>.\nThis normally ensures that if a provided component or service is never actually used by the app, the compiler can eliminate its code from the bundle.</p>\n<p>However, due to the way Angular stores injection tokens, it is possible that such an unused component or service can end up in the bundle anyway.\nThis page describes a dependency-injection design pattern that supports proper tree-shaking by using lightweight injection tokens.</p>\n<p>The lightweight injection token design pattern is especially important for library developers. It ensures that when an application uses only some of your library's capabilities, the unused code can be eliminated from the client's app bundle.</p>\n<p>When an application uses your library, there might be some services that your library supplies which the client app doesn't use.\nIn this case, the app developer should expect that service to be tree-shaken, and not contribute to the size of the compiled app.\nBecause the application developer cannot know about or remedy a tree-shaking problem in the library, it is the responsibility of the library developer to do so.\nTo prevent the retention of unused components, your library should use the lightweight injection token design pattern.</p>\n<h2 id=\"when-tokens-are-retained\">When tokens are retained<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lightweight-injection-tokens#when-tokens-are-retained\"><i class=\"material-icons\">link</i></a></h2>\n<p>To better explain the condition under which token retention occurs, consider a library that provides a library-card component, which contains a body and can contain an optional header.</p>\n<code-example>\n<lib-card>\n <lib-header>...</lib-header>\n</lib-card>\n</code-example>\n<p>In a likely implementation, the <code><lib-card></code> component uses <code>@<a href=\"api/core/ContentChild\" class=\"code-anchor\">ContentChild</a>()</code> or <code>@<a href=\"api/core/ContentChildren\" class=\"code-anchor\">ContentChildren</a>()</code> to obtain <code><lib-header></code> and <code><lib-body></code>, as in the following.</p>\n<code-example>\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'lib-header',\n ...,\n})\nclass LibHeaderComponent {}\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'lib-card',\n ...,\n})\nclass LibCardComponent {\n @<a href=\"api/core/ContentChild\" class=\"code-anchor\">ContentChild</a>(LibHeaderComponent)\n header: LibHeaderComponent|null = null;\n}\n</code-example>\n<p>Because <code><lib-header></code> is optional, the element can appear in the template in its minimal form,\n<code><lib-card></lib-card></code>.\nIn this case, <code><lib-header></code> is not used and
|
||
|
|
}
|