代码之家 › 专栏 › 技术社区 › ar099968

角元素:包括一次角核

angular-elements custom-element angular

ar099968 · 技术社区 · 6 年前

Angular Elements 角度组件包装为 custom elements . 每个角元素都会运送角核。如果在一个标准的html页面中我包含了5个角元素组件,那么这个页面下载的是角核心的5倍。

有一种方法可以只下载一次角核的组件代码吗?

1 回复 | 直到 6 年前

Markus Dresch 6 年前

当ivy渲染器最终被释放时,这个问题应该被消除( https://is-angular-ivy-ready.firebaseapp.com/#/status -状态在过去的几个月里没有改变…,因为它应该重新扫描任何未使用的代码,从而减少每个元素的大小。

同时你可以使用 https://github.com/manfredsteyer/ngx-build-plus#advanced-example-externals-and-angular-elements 要从自定义元素生成中排除基本包并在基本应用程序中提供它们,例如angular core、rxjs等只加载一次。

编辑:确保在主应用程序之后加载自定义元素(使用defer或动态加载),以确保加载所需的基本脚本。您不需要添加项目自述文件中提到的umd libs,只需确保您的基础应用程序拥有所有这些脚本(如果尚未导入,则将它们添加到angular.json)

Kashyap 6 年前

您可以使用ngx build plus并使它们成为外部的。请阅读: https://www.npmjs.com/package/ngx-build-plus

下面是最后一个html:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ElementsLoading</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

<!-- Consider putting the following UMD (!) bundles -->
<!-- into a big one -->

<!-- core-js for legacy browsers -->
<script src="./assets/core-js/core.js"></script>

<!-- Zone.js -->
<!-- 
    Consider excluding zone.js when creating
    custom Elements by using the noop zone.
-->
<script src="./assets/zone.js/zone.js"></script>


<!-- Polyfills for Browsers supporting 
        Custom Elements. Needed b/c we downlevel
        to ES5. See: @webcomponents/custom-elements
-->
<script src="./assets/custom-elements/src/native-shim.js"></script>

<!-- Polyfills for Browsers not supporting
        Custom Elements. See: @webcomponents/custom-elements
-->
<script src="./assets/custom-elements/custom-elements.min.js"></script>


<!-- Rx -->
<script src="./assets/rxjs/rxjs.umd.js"></script>

<!-- Angular Packages -->
<script src="./assets/core/bundles/core.umd.js"></script>
<script src="./assets/common/bundles/common.umd.js"></script>
<script src="./assets/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="./assets/elements/bundles/elements.umd.js"></script>

<!-- Calling Custom Element -->
<custom-element></custom-element>

</body>
</html>

我能够做到这一点,并能够外部化角度模块。但我想知道如何将用角度创建的自定义库外部化?我看到的一件事是Angular创建了UMD bundle,其中ng.core和ng.common被定义为globals(这样我就可以通过window对象访问它们)。我尝试使用rollupjs创建umd包,但它确实创建了任何globals变量,就像它对角度组件所做的那样。我被困在这里,在寻找想法。谢谢!