0
230
VisualizaçõesAngular 12: generación de paquetes de aplicaciones de navegador (fase: sellado) muy lento
Después de actualizar mi aplicación Angular de Angular 11.2.12 a Angular 12.0.0
Angular CLI: 12.0.0 Node: 14.15.4 Package Manager: npm 6.14.10 OS: win32 x64 Angular: undefined ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.1200.0 (cli-only) @angular-devkit/core 12.0.0 (cli-only) @angular-devkit/schematics 12.0.0 (cli-only) @schematics/angular 12.0.0 (cli-only) typescript 4.2.4 ng serve generar paquetes de aplicaciones de navegador lleva mucho tiempo.
Build at: 2021-05-28T06:03:02.008Z - Hash: 3b63141b76ac88698d67 - Time: 63941ms <- change one line in template Build at: 2021-05-28T06:08:04.424Z - Hash: e684399b5f80b2b4d785 - Time: 59834ms <- change property name Build at: 2021-05-28T06:10:05.725Z - Hash: 8125e1bdc31a25d398b5 - Time: 65621ms <- change one line in model Pruebo diferentes propiedades para ng serve , en este momento uso:
ng serve --source-map=true --hmr --live-reload Después de actualizar a Angular 12.0.0 , genero una nueva aplicación angular completa y tomo el control de angular.json para mi aplicación myapp :
angular.json
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "myapp": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "myapp", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/myapp", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.json", "inlineStyleLanguage": "scss", "assets": ["src/favicon.ico", "src/assets"], "styles": ["./node_modules/@angular/material/_theming.scss", "src/styles.scss"], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": { "scripts": true, "styles": false, "fonts": false }, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "myapp:build" }, "configurations": { "production": { "browserTarget": "myapp:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "myapp:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "inlineStyleLanguage": "scss", "assets": ["src/favicon.ico", "src/assets"], "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss"], "scripts": [] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"], "exclude": ["**/node_modules/**"] } }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "myapp:serve" }, "configurations": { "production": { "devServerTarget": "myapp:serve:production" } } } } } }, "defaultProject": "myapp" }¿Hay algo que pueda hacer para acelerar la generación de paquetes de aplicaciones del navegador (fase: sellado) ?
2 Respostas
Responde à pergunta0
Creo que los cambios en la velocidad se deben principalmente al paquete web 5. A menos que haya algún error horrible en Angular 12.
Instalé un complemento de paquete web SpeedMeasurePlugin . Para hacerlo, debe instalar @angular-builders/custom-webpack .
El archivo de configuración que usé fue algo como esto:
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin(); module.exports = smp.wrap({ output: { scriptType: "module" }, plugins: [] });Para mi proyecto que me dio el siguiente resultado.
Como puede ver, gran parte del tiempo se dedica a sass-loader (y posiblemente a css-loader).
Estoy buscando formas de almacenar en caché el sass. Creo que la mayor parte es de Angular Material.
Borré por completo mi archivo styles.css y terminé con:
El orden no es exactamente el mismo, pero el tiempo dedicado a sass en total parece ser considerablemente menor.
No estoy muy seguro de adónde ir desde aquí. Sass no es toda la historia y mi compilación aot sigue siendo extremadamente lenta. ¿Es ese paquete web 5? No estoy seguro.
0
Yo también actualicé una aplicación Angular 8 a 13 y noté una gran degradación en el tiempo de la fase de sellado durante el ciclo de edición y compilación (casi un minuto completo). Mi solución es la siguiente, ya que ninguna de las sugerencias que encontré me ayudó.
Independientemente de la nueva versión de Angular a la que haya actualizado, haga lo siguiente:
- Genere una nueva aplicación (por ejemplo,
ng new proj13) en la versión a la que está actualizando. Aquí, mantenga los valores predeterminados de creación del proyecto como se realizó en el proyecto anterior (por ejemplo,scssen lugar decss, enrutador o sin enrutador...) - Copie el nuevo
angular.jsontal como está del nuevo proyecto desechable al actualizado, o al menos asegúrese de volver a escribir el anterior para que se vea exactamente como el nuevo. - Asegúrese de que el nombre del proyecto sea el que se usa en las propiedades
projects,browserTarget,outputPath... en caso de que se produzca un cambio de nombre de archivo.
Una vez hecho esto, el ciclo de edición y compilación fue el "instantáneo" esperado, no más de milisegundos.
Creo que durante tales actualizaciones, el archivo angular.json no recibe la atención de formato de nueva versión adecuada que necesita, como debería descubrir si inspecciona los formatos de archivo/claves/propiedades antiguos frente a los nuevos.