Angular 6如何提高初始加载页面的速度

Question

您好，我不知道从服务器 gzip 压缩响应以减小捆绑 JS 大小！！！。

• 我已经尝试过这个link 1,link 2,link 3，但仍然无法成功初始加载 页面太慢了。
• Angular 包大小，例如 vendor.js 15 MB 大小，main.js 784KB， style.js 952KB。
• 我的路由模块带有基于路由器的渲染组件。
• 我已经更新了 package.json & angular.json 文件，我只是运行我的应用程序 使用 npm start 然后初始加载页面太慢，几乎 16.9 MB 大小 已转移。谢谢

Package.JSON

    {
      "name": "cfch",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve  --proxy-config  proxy.conf.json ",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
    "dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/common": "^6.1.0",     //may be I need to downgrade to lower version? 
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",

      },
       "devDependencies": {
        "@angular-devkit/build-angular": "^0.8.8",
        "@angular/cli": "6.1.0",
        "@angular/compiler-cli": "^6.1.0",
        "@angular/language-service": "^6.1.0",
        "@types/jasmine": "^2.8.14",
         "typescript": "^2.7.2"
         }
    }

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "CFCH": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/CFCH",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "src/theme.less",
              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "CFCH:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "CFCH:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "CFCH:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/theme.less",
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "CFCH-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "CFCH:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "CFCH:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "CFCH"
}

app-routing.module.ts

    const routes: Routes = [
    {
        path: '',
        component: CfchDataTableComponent,
       //loadChildren:'./cfch-data-table/cfch-data-table.component#CfchDataTableComponent',  //lazy loaded module
        //path: '', loadChildren: () => CfchDataTableComponent,
        data: { preload: true }

        //pathMatch: 'full',
    },
    {
        path:'singleCompanyStockList',
        component:SingleCompanyListComponent
    },
    {
        path:'valuation',
        component:ValuationComponent
    },
    {
        path:'risk',
        component:RiskComponent
    },
    {   path:'login',
    component:LoginComponent
   },
   {   path:'register',
    component:RegisterPageComponent
   },
   {   path:'forgetPwd',
    component:ForgetPasswordComponent
   },
   {   path:'info',
    component:InfoComponent
   },
   {   path:'essentialInfo',
    component:EssentialInfoComponent
  },

   {    path:'manageCompany',
        //canActivate: [AuthGuard],
        component:ManageCompanyComponent
   },

   {   
        path:'dataManage',
        //canActivate: [AuthGuard],
        component:DatamanageComponent
   },
   {
        path:'benchmark',
        canActivate: [AuthGuard],
        component:BenchmarkingComponent
   },
   {
    path:'financeEntry',
    component:FinanceEntryComponent
   },



   {   path:'joinUS',
        component:JoinUsPageComponent,
   },

];
@NgModule({
    imports: [RouterModule.forRoot(routes)
    ],
    exports: [RouterModule],
})
export class AppRoutingModule { }

- 请查看附件中的浏览器控制台网络结果

Answer 1

Gzip 由您的托管服务器完成，该服务器为您的 Angular 应用程序提供服务。它与您的 javascript 框架无关，无论是 Angular 还是其他任何框架。

不妨碍大多数云托管服务提供商开箱即用地配置 gzip 压缩。但我发现免费且更容易用于个人项目试用的是来自 google 的 firebase.com，它也免费提供 SSL，您可以查看他们的托管服务。

Answer 2

**延迟加载** 你必须将应用路由模块更改为延迟加载模块。显着减小 main.js 和 vendor.js 的大小。

Answer 3

通过修改您的 package.json 启用生产编译

这个：

{
  "name": "cfch",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve  --proxy-config  proxy.conf.json ",
    "build": "ng build",

应该是：

（添加--prod）

{
  "name": "cfch",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve  --proxy-config  proxy.conf.json ",
    "build": "ng build --prod",

您的供应商 Java 脚本在您的 dist 目录中应该小得多。

当然，这不会在运行“npm start”时改变 Java 脚本的大小。那是开发者模式。