要解决Angular 7 PWA(渐进式网络应用)的首次加载时间问题,可以采取以下步骤:
使用Angular CLI生成PWA项目:
ng new my-pwa
在项目根目录中安装@angular/pwa
依赖项:
npm install @angular/pwa
在src/app/app.module.ts
文件中导入ServiceWorkerModule
:
import { ServiceWorkerModule } from '@angular/service-worker';
在imports
数组中将ServiceWorkerModule
添加到AppModule
中:
imports: [
// ...
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
]
在angular.json
文件中启用PWA支持:
{
// ...
"architect": {
"build": {
"configurations": {
"production": {
// ...
"serviceWorker": true
}
}
}
}
}
使用ng build
命令进行构建:
ng build --prod
使用http-server
或其他静态服务器查看构建结果:
npm install -g http-server
http-server -p 8080 -c-1 dist/my-pwa
通过以上步骤,您的Angular 7 PWA将会有更快的首次加载时间。