【问题标题】:What does angular scripts optimization do? Angular 14角脚本优化有什么作用?角 14
【发布时间】:2022-11-08 04:17:48
【问题描述】:

我将我的项目从 v9 更新为 angular v14。直到 v12 没有问题,但现在我不能再构建它了。它以Error: Optimization error [default-src_app_main_collection_module_ts.js]: SyntaxError: Unexpected token: punc ({) 失败。

如果在angular.json 我禁用脚本优化({ "configurations": { "production": { "optimization": { "scripts": false }}}}),则不会出现错误。我认为这可能与从 ts 到 js 文件的转录有关,但我不知道是什么导致了问题。

所以有两个问题:

  1. 您对这个错误有所了解吗? (我使用的打字稿转录方法可能与 angular 14 优化器不兼容,但我找不到它。)
  2. 脚本优化有什么作用?如果脚本优化不重要,我将禁用它。

    提前感谢您的帮助!

    "dependencies": {
            "@angular/animations": "^14.2.7",
            "@angular/cdk": "14.2.5",
            "@angular/common": "^14.2.7",
            "@angular/compiler": "^14.2.7",
            "@angular/core": "^14.2.7",
            "@angular/flex-layout": "^14.0.0-beta.41",
            "@angular/forms": "^14.2.7",
            "@angular/material": "^14.2.5",
            "@angular/platform-browser": "^14.2.7",
            "@angular/platform-browser-dynamic": "^14.2.7",
            "@angular/router": "14.2.7",
            "@auth0/angular-jwt": "^5.0.1",
            "@editorjs/editorjs": "^2.25.0",
            "@editorjs/paragraph": "^2.8.0",
            "@flowjs/flow.js": "2.14.1",
            "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
            "@stomp/stompjs": "^6.1.0",
            "@types/jquery": "3.5.14",
            "@types/resize-observer-browser": "^0.1.7",
            "@types/sockjs-client": "^1.5.0",
            "angular-resizable-element": "^3.4.0",
            "angular-resize-event": "^2.1.0",
            "angular-shepherd": "^14.0.0",
            "angular-svg-round-progressbar": "^9.0.0",
            "angular2-virtual-scroll": "0.4.16",
            "copy-image-clipboard": "^2.1.2",
            "core-js": "^3.26.0",
            "dompurify": "^2.1.1",
            "event-source-polyfill": "^1.0.21",
            "fs-extra": "^10.1.0",
            "git-describe": "^4.0.4",
            "html2canvas": "^1.4.1",
            "jquery": "^3.5.1",
            "jquery.scrollto": "2.1.3",
            "jstree": "^3.3.10",
            "material-design-icons": "^3.0.1",
            "material-icons": "^1.10.8",
            "moment": "^2.29.3",
            "ng-recaptcha": "^10.0.0",
            "ngx-clipboard": "14.0.1",
            "ngx-contextmenu": "^6.0.0",
            "ngx-infinite-scroll": "^14.0.0",
            "ngx-perfect-scrollbar": "^10.0.1",
            "ngx-scrollbar": "^10.0.1",
            "overlayscrollbars": "1.13.0",
            "rxjs": "^6.6.7",
            "shepherd.js": "^10.0.1",
            "sockjs-client": "^1.5.1",
            "tslib": "^2.4.0",
            "zone.js": "~0.11.4"
        },
        "devDependencies": {
            "@angular-devkit/build-angular": "^14.2.6",
            "@angular/cli": "14.2.6",
            "@angular/compiler-cli": "^14.2.7",
            "@angular/language-service": "^14.2.7",
            "@types/jasmine": "^4.3.0",
            "@types/node": "^16.11.7",
            "codelyzer": "^6.0.0",
            "hammerjs": "^2.0.8",
            "husky": "^4.3.8",
            "jasmine-core": "^4.4.0",
            "jasmine-reporters": "^2.5.0",
            "jasmine-spec-reporter": "^7.0.0",
            "karma": "~6.4.1",
            "karma-chrome-launcher": "^3.1.1",
            "karma-coverage-istanbul-reporter": "^3.0.3",
            "karma-jasmine": "^5.1.0",
            "karma-jasmine-html-reporter": "^2.0.0",
            "karma-junit-reporter": "2.0.1",
            "lint-staged": "^13.0.3",
            "ng-mocks": "^14.3.1",
            "ng-packagr": "^14.2.2",
            "prettier": "^1.19.1",
            "protractor": "~7.0.0",
            "puppeteer": "^19.2.0",
            "sonar-scanner": "^3.1.0",
            "ts-node": "^10.9.1",
            "tslint": "~6.1.0",
            "tslint-config-prettier": "^1.18.0",
            "typescript": "^4.8.4"
        },
    

【问题讨论】:

  • 您是否遵循 Angular 更新页面中的升级指南?可以通过此链接访问它update.angular.io
  • 尽我所能。我不明白每一点是什么,而且我有一些旧的依赖项,我无法更新但仍然需要。网络应用程序仍然可以正常工作,只是脚本的这种优化让我很烦。

标签: javascript angular typescript frontend


【解决方案1】:

因此,如果您查看他们的源代码,看起来优化所做的只是针对 esbuild.transform 运行编译代码以缩小,然后针对 tersor 运行结果以优化包大小。所以很可能你的文件中有这个插件不喜欢的语法。也许您可以在 --verbose 模式下运行它以获得更多洞察力。

这是他们的javascript-optimizer-worker.ts 供您查看。 https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/src/webpack/plugins/javascript-optimizer-worker.ts

【讨论】:

    猜你喜欢
    • 2018-11-26
    • 2015-11-04
    • 2022-11-03
    • 2022-01-06
    • 2018-11-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多