Angular 6如何提高初始负荷的速度

Question

嗨，我想不通服务器的gzip压缩响应，以减少捆绑包JS的大小！

• 我已经尝试过此链接1 ， 链接2 ， 链接3，但仍然无法成功初始加载页面太慢。
• 角度包大小，例如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由您的托管服务器完成，该服务器为您的角度应用提供服务。 它与您的JavaScript框架无关，无论是角度还是其他任何角度。

大多数云托管服务提供商都无需开箱即用地配置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脚本的大小。 那就是开发人员模式。