如何在Angular 6中减少polyfills脚本的初始负载？
在Angular 6中，可以通过以下几种方式来减少polyfills脚本的初始负载：
- 使用Differential Loading：Angular 6引入了Differential Loading的概念，它可以根据浏览器的能力加载不同的代码。通过使用ng build命令时的--prod标志，Angular会自动为现代浏览器生成ES2015+的代码，而为旧版浏览器生成ES5的代码。这样可以减少polyfills脚本的大小，提高应用的加载速度。
- 移除不必要的polyfills：Angular的polyfills脚本包含了一些用于兼容旧版浏览器的代码。但是，如果你的应用只需要支持现代浏览器，可以通过修改polyfills.ts文件来移除不必要的polyfills。例如，可以注释掉对IE浏览器的支持代码，从而减少polyfills脚本的大小。
- 使用动态导入：Angular 6支持使用动态导入来延迟加载模块。通过将一些不常用的功能模块延迟加载，可以减少初始加载时所需的polyfills脚本大小。可以使用Angular的路由器来实现延迟加载，具体可以参考Angular官方文档中关于路由器的章节。
- 使用Tree Shaking：Angular 6内置了Tree Shaking功能，它可以在构建过程中自动删除未使用的代码。通过使用Tree Shaking，可以消除应用中未使用的polyfills代码，从而减少polyfills脚本的大小。
总结起来，要在Angular 6中减少polyfills脚本的初始负载，可以使用Differential Loading、移除不必要的polyfills、使用动态导入和使用Tree Shaking等技术手段。这些方法可以减小polyfills脚本的大小，提高应用的加载速度。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数计算（云原生）：https://cloud.tencent.com/product/scf
- 腾讯云CDN加速：https://cloud.tencent.com/product/cdn
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
相关·内容
我正在为2015构建一个。
我的集线器HTML页面可以正常工作，直到我切换到使用和angular2，此时任何来自systemjs的脚本请求似乎都会被拒绝，而401未经授权。
我密切地遵循了指南，并且在没有身份验证的情况下，它在本地工作得很好。
但是，一旦我将应用程序上传到TFS，任何由systemjs请求的脚本都会被拒绝，如下所示：
Error: XHR error (401 Unauthorized) loading http://tfs-server:8080/tfs/_apis/public/gallery/publisher/my-publisher/extension/source-
浏览 2提问于2016-03-09得票数 1
回答已采纳
我正在尝试完全优化Angular 7应用程序，我的包大小是：
main.js.map (main) 2.05 MB
polyfills.js.map (polyfills) 237 kB
runtime.js.map (runtime) 14.2 kB
scripts.js.map (scripts) 1.02 MB
styles.js.map (styles) 381 kB
但是当我运行这个命令时：
ng build --prod --aot && gzipper --verbose ./dist && ng run my-app:server:p
浏览 23提问于2020-03-06得票数 0
回答已采纳
我一直在关注这个教程。我有一个Django应用程序，它的结构可以简化如下
apps/my_app/migrations/
apps/my_app/__init__.py
apps/my_app/urls.py
apps/my_app/views.py
frontend_stuff/js/ javascripts here
frontend_stuff/css/ css here
英雄应用程序的结构如下：
heroes/app/ contains all the .ts and .html files
heroes/node_modules/ angular2
浏览 0提问于2016-03-30得票数 4
回答已采纳
<script src="~/angular/runtime*"></script>
<script src="~/angular/polyfills*"></script>
<script src="~/angular/vendor*"></script>
<script src="~/angular/main*"></script>
我想在布局页面中添加这些脚本
浏览 0提问于2018-12-18得票数 7
回答已采纳
我遇到了一个问题。我需要使用angular构建自定义index.html文件。我决定使用angular-builders和html-webpack-plugin。它运行良好，但有一块不包括在html-webpack-plugin结果中。 下面是我的配置: custom-webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
inj
浏览 16提问于2019-09-16得票数 2
我刚开始玩Angular2，遇到了一个奇怪的组件文件扩展名问题：
让我们使用 (我将在这里复制代码以供参考)。
文件结构
angular2-quickstart
|- app
| |- app.component.ts
| |- boot.ts
|
|- index.html
|- package.json
|- tsconfig.json
package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
浏览 14提问于2015-12-20得票数 22
回答已采纳
1回答
在我的angular 4应用程序中我有一些脚本，当我第一次加载所有它的ok，但当切换到我的应用程序的其他组件并返回到主页面时，所有的脚本都不起作用。在控制台日志中发送消息，例如，这是一个函数滚动顶部
$(window).scroll(function() {
var wScroll = $(this).scrollTop(), scrollAmount = 150;
if (wScroll > scrollAmount) {
$(".button__scroll--up").addClass("is_showing");
} else {
$(&
浏览 7提问于2017-08-06得票数 0
回答已采纳
2回答
离子框架网络插件问题
、、、
我正在使用离子3。我安装了网络插件来检查app.component.ts中的网络连接
但是当我使用这种方法时，它会给我带来错误。
core.js:1449 ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
at Network.onDisconnect (index.js:61)
at app.component.ts:17
at t.invoke (polyfills.js:3)
浏览 2提问于2019-02-19得票数 1
回答已采纳
我们有一个遗留应用程序，包括POJavascript、prototype、jquery。
我们正在重写该应用程序的角度，一次一个部分。目前，我们已经用angular4重写了一些部分。我们正在使用webpack捆绑angular4应用程序，包括应用程序登陆页面中的角包，运行良好；webpack dev服务器也运行良好。
现在，我正在尝试升级到角CLI和角v6.2.1。因此，我用CLI创建了一个新项目，然后将我的angular4源代码复制到这个新项目中，解决了所有错误。CLI正在吐出所有必需的脚本。我正在把这些剧本写在我的登陆页上。
通过prod构建，它不会显示控制台中的任何错误，角应用程序也不会
浏览 0提问于2018-09-17得票数 2
这里我是创建用户，艺术家在projects文件夹下，我是运行服务用户项目工作的服务器，但是我想运行相同的端口，比如(localhost:40001)运行用户和艺术家(localhost:40001/)在角角json中可能或不可能。
用户
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>User</title>
<base href="/">
<meta
浏览 8提问于2022-03-24得票数 0
1回答
如何在服务器端配置角代理？
、、、、
我正在测试一个新的aproach在我的前端应用程序构建与角，我想隐藏API url对浏览器网络。表单示例:要调用api.url.dz/login上的登录，我想在前面调用front.url.dz/login，然后将其重定向到api.url.dz/login。这是我的proxy.config.json文件：
{
"http://localhost:4200":{
"target":"http://localhost:9999/",
"secure":false,
"cha
浏览 5提问于2022-08-29得票数 0
我不时会遇到以下错误。
ERROR Error: Uncaught (in promise): invalid link:MenuPage
at d (polyfills.js:3)
at l (polyfills.js:3)
at Object.reject (polyfills.js:3)
at NavControllerBase._fireError (nav-controller-base.js:322)
at NavControllerBase._failed (nav-controller-base.js:310)
at nav-co
浏览 7提问于2017-05-06得票数 20
我正在尝试减少我的angular (Angular 6)应用程序的页面初始负载。我已经延迟加载模块，缩减js和css，将"--prod -- build -optimizer --aot“标签添加到我的构建脚本中，但没有找到任何解决方案来减少"polyfills”脚本的执行时间。我使用"Chrome Audit“工具来查看页面性能。 提前感谢 ?
浏览 25提问于2019-05-13得票数 3
4回答
我使用ng update升级到了Angular 8。它运行自己的迁移脚本，这些脚本(其中包括)删除了polyfills.ts中的es6/es7导入。据我所知，Angular将为较旧的浏览器(包括IE11)创建一个特殊的构建，我再也不用担心polyfills了？我将browserlist更新为not IE 9-10，而不是not IE 9-11，以(我假设)提示它应该构建适当的polyfills。
不幸的是，在运行ng build之后，我得到了一些与polyfill相关的错误，例如。Reflect.getMetadata is not a function和Object doesn't
浏览 0提问于2019-06-12得票数 14
2回答
我试图写一个单页的应用程序，但我无法使路由工作。我试过使用许多教程，但考虑到Angular2还在测试阶段，它们似乎很快就过时了。
看来，一旦我添加了对路由器指令、路由器配置或路由器提供商的引用，应用程序就会停止工作，浏览器的控制台上会打印以下错误：
Error: Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:332:20
Zone</Zone</Zone.prot
浏览 2提问于2016-04-06得票数 4
回答已采纳
我对kubernetes很陌生，我正在尝试用Gitlab管道部署一个普通的堆栈应用程序到Google中的Kubernetes引擎。但是，我无法让它连接到在开放端口(4200)上运行我的代码的吊舱。你可以在下面找到我的YAML。Dockerfile
FROM node:13.13-alpine
RUN mkdir -p /usr/src/app
COPY . /usr/src/app
WORKDIR /usr/src/app
RUN cd /usr/src/app && npm install @angular/core@9.1.4 @angular/animations@9.1
浏览 4提问于2020-05-24得票数 1
回答已采纳
要么是我错过了什么，要么是--proxy-configuration不能正常工作了。我正在尝试使用http://localhost:56209/api/authenticate/login，但它似乎不起作用。Postman的所有请求都工作得很好。
调试日志显示，这些请求实际上是被重定向的，但Chrome控制台告诉我并非如此。
10% building 3/3 modules 0 active [HPM] Proxy created: /api -> http://localhost:56209/
[HPM] Subscribed to http-proxy events: [ &#
浏览 1提问于2020-10-15得票数 1
我尝试将样式和脚本添加到我的angular.json文件中，但由于某些原因，无论是引导程序还是其他脚本都不起作用，后来我发现在angular.json中有两个地方可以编写脚本和样式
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-firebase&
浏览 2提问于2022-01-02得票数 0
我有一个角形6应用程序，我正在尝试建立我自己的风格库.以下是angular.json文件的外观：
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": &#
浏览 0提问于2018-11-16得票数 0
我试图在Chrome扩展中使用angular2，但它并没有意识到我已经加载了angular2包。以下是我在文件/www/popup.html中的脚本标记
<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/es6-shim.min.js"></script>
<script src="lib/js/system-polyfills.js"></script>
<script src="
浏览 4提问于2016-03-04得票数 2
回答已采纳
我的SystemJS配置有问题
我在VS2015 (asp.net Core1.0)中有一个可以工作的angular2应用程序。我可以编译.ts文件并进行更改，并且不会发生任何错误。
我现在想将应用程序移动到glassfish 4.1 web项目中(充当生产服务器)，但当我将整个wwwroot内容(所有.js)从VS2015移动到glassfish web文件夹时，我会看到许多404。
下面是我在VS2015中使用的Index.html文件：
<!DOCTYPE html>
<html>
<head>
<base href="/"
浏览 0提问于2016-04-14得票数 0
1回答
我在服务器上部署了Range2应用程序，运行良好。另外，我还记录了角应用的误差，这样我就可以解决它们，使我的应用更加稳定。
我一直在收到Loading chunk failed错误。
Error: Uncaught (in promise): Error: Loading chunk 9 failed.
(error: https://prjectcdn/9.d91e531959b3f1aa8ff2.js)
Error: Loading chunk 9 failed.
(error: https://prjectcdn/9.d91e531959b3f1aa8ff2.js)
at HTM
浏览 1提问于2019-07-30得票数 10
我想在我的角4 cli应用程序中向角-cli.json添加app。
我用的是: angular4，打字稿，webpack。
我做了: npm安装-保存图表
现在，我需要在ange-cli.json文件中添加add，但不确定如何准确地。
这是我的ange-cli.json文件：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "my-app"
},
"apps
浏览 3提问于2017-04-13得票数 1
2回答
我正在构建一个c# angular应用程序。目前，我正在使用调用layout.cshtml文件中的脚本。 <script src="~/bundles/runtime.js"></script>
<script src="~/bundles/polyfills.js"></script>
<script src="~/bundles/vendor.js"></script>
<script src="~/bundles/scripts.js">&
浏览 16提问于2019-09-14得票数 0
1回答
我有一个简单的TypeScript角2例子：
test.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<div>Test</div>'
})
export class TestComponent {}
main.ts
import {bootstrap} from 'angular2/platform/browser'
import {TestComponen
浏览 0提问于2016-02-02得票数 2
回答已采纳
编辑：
我还没有弄清楚它为什么不起作用，但我从零开始，得到了一个。似乎没有必要将system.src.js放在angular脚本标记之前，请按下面的答案之一进行调整。请参阅工作版本和角2 。
原题：
我正在努力学习角2和快车。我通常遵循指南。我收到以下错误：
ReferenceError: require is not defined(…) angular2-polyfills.js:1243
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$$int
浏览 3提问于2016-02-26得票数 5
我尝试使用类型记录将角js迁移到angularjs2。
我不明白如何使用js库。我有主app.component，我想在其中初始化一些库，例如简单的行：
$('#home').height($(window).height());
并由attribute data-spy="scroll" data-target="#header-navbar" data-offset="51"初始化
Index.html
<body data-spy="scroll" data-target="#header-na
浏览 3提问于2016-07-24得票数 1
回答已采纳
我的角度应用程序升级到11。
我做了一个> ng build --prod
我看到了这样的信息：
√ Browser application bundle generation complete.
√ ES5 bundle generation complete.
Initial Chunk Files | Names | Size
scripts.3cf268d47c462590e7d9.js | scripts | 3.27 MB
main-es5.99
浏览 7提问于2021-02-18得票数 6
回答已采纳
我正在尝试测试一个包含文本输入元素的组件。我想验证当文本输入的值发生变化时，组件的状态是否按预期发生了变化。当然，文本输入使用ngModel指令(双向绑定)。
尽管组件在运行时运行良好，但我在创建有效的、通过测试时遇到了问题。我已经在下面发布了我认为应该可以工作的内容，以及紧随其后的测试结果。
我做错了什么？
测试：
import {Component} from 'angular2/core';
import {describe, it, injectAsync, TestComponentBuilder} from 'angular2/testing';
i
浏览 5提问于2016-03-22得票数 7
1回答
我正在尝试集成角度2与Symfony 3。我使用npm安装节点模块，但我不能链接他们从我的视图基础base.html.twig。实际上，我添加的每个脚本都不起作用(甚至在页面的源代码中也不行)。
需要下列脚本，我如何添加它们？
<!-- IE required polyfills, in this exact order -->
<script src="../../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../../node_modules/s
浏览 3提问于2016-03-17得票数 0
回答已采纳
1回答
即时通信正在使用ionic2 rc.5
这是我的提供者：
import {Http, Headers, RequestOptions} from '@angular/http';
import { Injectable, Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading } from 'ionic-angular';
import {Observable} from 'rxjs/Obse
浏览 16提问于2017-01-25得票数 2
回答已采纳
我的环境如下
webpack
angular2
HtmlWebpackPlugin
我提取的webpack.config.js文件如下所示
entry: {
'polyfills': './src/polyfills.browser.ts',
'main': './src/main.browser.ts'
},
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
生成的最终html具有以下脚本引用
<scr
浏览 6提问于2017-09-13得票数 5
6回答
我收到一个错误，找不到原因。下面是错误：
EXCEPTION: Error during instantiation of LocationStrategy! (RouterOutlet -> Router -> Location -> LocationStrategy).
angular2.dev.js:23514 EXCEPTION: Error during instantiation of LocationStrategy! (RouterOutlet -> Router -> Location -> LocationStrategy).Br
浏览 103提问于2015-12-31得票数 220
回答已采纳
我想在我的Range2项目中使用cookie，并尝试在我的项目中实现angular2-cookie。我遵循了的指示。
这是我目前的代码：
import { Component, OnDestroy } from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';
import {CookieService} from 'angular2-cookie/core';
@Component({
templateUrl: 'app/fragen/f
浏览 3提问于2016-05-09得票数 1
回答已采纳
我得到了这个错误，我找不出哪里错了，代码是相同的，并且在Angular 2 Beta 17中工作。我做了所有正确的事情，我在Angular2网站上检查了几次。
错误
EXCEPTION: No Directive annotation found on AWebAppComponent
browser_adapter.ts:78EXCEPTION: No Directive annotation found on AWebAppComponentBrowserDomAdapter.logError @ browser_adapter.ts:78BrowserDomAdapter.logGrou
浏览 0提问于2016-05-05得票数 1
有人知道为什么当页面第一次在我的Angular2应用程序中加载时，我会出现这个错误吗？当我浏览我的应用程序时，它会清除，不会回来。如果我点击CTRL+F5，它就会回来(虽然不是每次都这样！)此应用程序的路由如下：
AppComponent.ts
LoginComponent.ts
DashboardComponent(Parent route with its own child routes)
MainDashboardComponent
EmployeesComponent
顶层的index.html文件中有一个<my-app></my-app&g
浏览 0提问于2016-02-05得票数 2
1回答
我尝试将SystemJS配置为Auth0 (angular2-jwt)和角2.0.0-beta.6，但始终得到以下错误：
GET http://localhost:3000/angular2/http 404 (Not Found)fetchTextFromURL @ system.src.js:1068(anonymous function) @ system.src.js:1649lib$es6$promise$$internal$$initializePromise @ angular2-polyfills.js:515lib$es6$promise$promise$$Promise @
浏览 2提问于2016-02-29得票数 2
回答已采纳
我在Angular2 beta-15上运行了一个应用程序，但后来我将它更新为beta-17，现在出现了一个很难破解的错误。
EXCEPTION: Can only add to a TokenMap! Token: ElementRef angular2.dev.js:25654
EXCEPTION: Can only add to a TokenMap! Token: ElementRef angular2.dev.js:25644:9
Object { message: "Can only add to a TokenMap! Token: …", stack: "
浏览 3提问于2016-05-02得票数 0
回答已采纳
我有一个片段： import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
enableProdMode();
import '../../../src/bundle';
import {ModuleNgFactory} from './module.ngfactory';
platformBrowser().bootstrapModuleFactory(Mod
浏览 23提问于2019-05-29得票数 0
回答已采纳
我试图在GWT2.6.0中使用Angular2(只有JavaScript，而不是TypeScript)。
有这样一个非常基本的代码：
public native void init() /*-{
var MyComp= $wnd.ng.Component({
selector: 'my-sample',
properties:['model']
})
.View({
directives: [],
template: '\n<h1>Hello world!</h1>'
})
.Clas
浏览 2提问于2016-03-18得票数 0
回答已采纳
1回答
假设我们有三条路线：
/
/login
/reports
当前，如果用户手动输入不存在的路由(如/bla)，控制台将引发错误：
browser_adapter.js?d744:76 Error: Uncaught (in promise): ObjectUnsubscribedError
at resolvePromise (angular2-polyfills.js:543)
at angular2-polyfills.js:579
at ZoneDelegate.invokeTask (angular2-polyfills.js:365)
at Object.NgZon
浏览 3提问于2016-04-02得票数 1
回答已采纳
1回答
我在angular.json中有这样的代码：
"root": "admin/",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"baseHre
浏览 4提问于2021-11-10得票数 0
对于我面临的这个基本问题，我找不到合适的标题。我正在使用这个种子项目：
在尝试从这里实现一些基本命令之后：
页面未加载。它卡住了：“正在加载...”
greeting.ts：
import {Component} from 'angular2/core';
@Component({
selector: 'greeting',
templateUrl: 'app/greeting/greeting.html',
styleUrls: ['app/greeting/greeting.css']
})
export def
浏览 2提问于2016-07-02得票数 1
我正在尝试在浏览器上上传ionic web应用程序。我用ionic build browser --prod --release成功构建了代码。然后我使用firebase deploy部署了应用程序，该应用程序也成功上传。现在，当我尝试登录时，浏览器控制台中显示错误
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
at __w
浏览 0提问于2017-12-19得票数 0
这是一个角度2 Beta的问题。我一开始特别笼统地希望这是一个已知的错误，我只是在我所有的搜索中遗漏了一些东西。当角2Beta.0出现时，我使用IE10在我的应用程序中运行了一个非常简单的模块。它基本上打印了“我的第一个模块”之类的东西。
当角2Beta.1出现时，我尝试运行相同的代码，并得到以下错误。在Angular2 2.0.0-beta.2和angular2 2.0.0-beta.3中也会发生这种情况：
EXCEPTION: SyntaxError: Expected ';'
STACKTRACE
SyntaxError: Expected ';'
浏览 2提问于2016-02-02得票数 0
回答已采纳
angular2-polyfills.js:332 Error: ReferenceError: webdriver is not defined(…)ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263dr
浏览 2提问于2016-04-09得票数 0
我试图将angular2指令集成到我的项目中；ng2-从中选择，但我正在努力集成它。
在我的index.html文件中，我这样配置Systemjs
System.config({
map: {
'ng2-select': 'node_modules/ng2-select'
},
packages: {
app: {
format: 'register',
浏览 4提问于2016-04-03得票数 0
2回答
我对Webpack和NodeJS很陌生，所以我做简单的测试只是为了学习。我正在开发一个新的网站，我的想法是：
我有一个vendor.ts文件，我可以把我的所有供应商js和css：
// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http'
浏览 4提问于2016-07-27得票数 0
回答已采纳
我正在尝试使用angular2 2/http组件中的webapi服务。为了学习目的，我想使用公共，它返回国家列表。我编写了一个angular2组件，它将调用CountryService组件来使用实际的restapi服务，然后迭代列表并向用户展示。
我已经创建了一个柱塞来测试这个。。
我在chrome浏览器中遇到了如下问题
angular2.dev.js:24821 Error: Uncaught (in promise): Failed to load appcomponent.html
at resolvePromise (angular2-polyfills.js:564)
at angu
浏览 2提问于2016-06-16得票数 0
回答已采纳
有问题的资料来源：
我试图将Http注入服务，这导致了错误：
http:1 Uncaught SyntaxError: Unexpected token <__exec @ system.src.js:1374entry.execute @
system.src.js:3300linkDynamicModule @ system.src.js:2921link @ system.src.js:2764execute @
system.src.js:3096doDynamicExecute @ system.src.js:715link @ system.src.js:908doLin
浏览 4提问于2015-12-24得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
