依赖Webpack bundle analyzer对Angula

2024-10-31  本文已影响0人  MAYDAY77

1、安装依赖  npm install webpack-bundle-analyzer@^3.0.3

2、对package.json文件进行配置

scripts下添加一条指令:"bundle-report": "webpack-bundle-analyzer dist/stats.json"

3、对angular.json文件进行配置 

            "outputPath": "dist",

architect配置如下

"architect": {

  "build": {

    "builder": "@angular-devkit/build-angular:browser",

    "options": {

      "outputPath": "dist",

      "index": "src/index.html",

      "main": "src/main.ts",

      "tsConfig": "src/tsconfig.app.json",

      "polyfills": "src/polyfills.ts",

      "assets": [

        "src/assets",

        "src/favicon.ico",

        {

          "glob": "**/*",

          "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",

          "output": "/assets/"

}

      ],

      "styles": [

        "node_modules/bootstrap/dist/css/bootstrap.css",

        "node_modules/font-awesome/css/font-awesome.css",

        "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",

        "node_modules/ng-zorro-antd/src/ng-zorro-antd.less",

        "src/styles.scss",

        "src/animate.css"

      ],

      "scripts": [

        "node_modules/jquery/dist/jquery.js",

        "node_modules/echarts/dist/echarts.min.js",

        "src/assets/js/fingerprint.js",

        "node_modules/echarts/lib/chart/map/china.js"

      ]

    },

    "configurations": {

      "test": {

        "optimization": false,

        "outputHashing": "all",

        "sourceMap": false,

        "extractCss": true,

        "namedChunks": false,

        "aot": true,

        "extractLicenses": true,

        "vendorChunk": false,

        "buildOptimizer": false,

        "fileReplacements": [

          {

            "replace": "src/environments/environment.ts",

            "with": "src/environments/environment.test.ts"

          }

        ]

      },

      "production": {

        "optimization": true,  //  optimization buildOptimizer 两个参数改为false不压缩,打包后提交大一倍,但是构建时间减少一倍,上生产改成true,测试为false

        "outputHashing": "all",

        "sourceMap": false,

        "extractCss": true,

        "namedChunks": false,

        "aot": true,

        "extractLicenses": true,

        "vendorChunk": false,

        "buildOptimizer": true,

        "fileReplacements": [

          {

            "replace": "src/environments/environment.ts",

            "with": "src/environments/environment.prod.ts"

          }

        ]

      }

    }

  },

  "serve": {

    "builder": "@angular-devkit/build-angular:dev-server",

    "options": {

      "browserTarget": "micro-service:build",

      "proxyConfig": "proxy.config.json"

    },

    "configurations": {

      "test": {

        "browserTarget": "micro-service:build:test"

      },

      "production": {

        "browserTarget": "micro-service:build:production"

}

    }

  },

  "extract-i18n": {

    "builder": "@angular-devkit/build-angular:extract-i18n",

    "options": {

      "browserTarget": "micro-service:build"

    }

  },

  "test": {

    "builder": "@angular-devkit/build-angular:karma",

    "options": {

      "main": "src/test.ts",

      "karmaConfig": "./karma.conf.js",

      "polyfills": "src/polyfills.ts",

      "tsConfig": "src/tsconfig.spec.json",

      "scripts": [

        "node_modules/jquery/dist/jquery.js",

        "node_modules/popper.js/dist/umd/popper.js",

        "node_modules/echarts/dist/echarts.min.js",

        "src/assets/js/fingerprint.js",

        "node_modules/echarts/lib/chart/map/china.js"

      ],

      "styles": [

        "node_modules/bootstrap/dist/css/bootstrap.css",

        "node_modules/font-awesome/css/font-awesome.css",

        "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",

        "node_modules/ng-zorro-antd/src/ng-zorro-antd.less",

        "src/styles.scss",

        "src/animate.css"

      ]

}

  },

  "lint": {

    "builder": "@angular-devkit/build-angular:tslint",

    "options": {

      "tsConfig": [

        "src/tsconfig.app.json",

        "src/tsconfig.spec.json"

      ],

      "exclude": [

        "**/node_modules/**"

      ]

}

  }

}

4、执行ng build --prod --stats-json

5、最后执行npm run bundle-report 会单独打开一个页面展示如下,可以一目了然的看到各个模块大小和nginx压缩后的大小

上一篇下一篇

猜你喜欢

热点阅读