缩小 main.js Angular 11 的大小

Question

我遇到了一个问题，我的应用程序 main.js 默认大小为 8.34 MB（ng build）。我测试了很多！有很多事情可以减少它，但我只是没有到达..

我真的需要小于 2 mb 的大小..（而且我认为它也很大..）感谢帮助！我尝试了什么（main.js 的大小）：

ng build = 8.34MB
ng build --prod = 7.71 MB
ng build --prod --aot --build-optimizer = 7.71 MB
ng build --prod --aot --build-optimizer && gzipper compress ./dist = ...

package.json

{
    "name": "app",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve --proxy-config proxy.conf.json --hmr",
        "build": "ng build --prod --aot --build-optimizer && gzipper compress ./dist",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "11.1.2",
        "@angular/cdk": "^11.1.2",
        "@angular/common": "11.1.2",
        "@angular/compiler": "11.1.2",
        "@angular/core": "11.1.2",
        "@angular/flex-layout": "^11.0.0-beta.33",
        "@angular/forms": "11.1.2",
        "@angular/material": "^11.1.2",
        "@angular/material-moment-adapter": "^11.1.2",
        "@angular/platform-browser": "11.1.2",
        "@angular/platform-browser-dynamic": "11.1.2",
        "@angular/router": "11.1.2",
        "@ngx-translate/core": "^13.0.0",
        "@ngx-translate/http-loader": "^6.0.0",
        "@swimlane/ngx-charts": "^17.0.0",
        "@swimlane/ngx-datatable": "^19.0.0",
        "@types/d3-shape": "^2.0.0",
        "ajv": "^7.0.4",
        "angular-calendar": "^0.28.22",
        "angular-feather": "^6.1.0",
        "angular-ng-autocomplete": "^2.0.5",
        "apexcharts": "^3.24.0",
        "c3": "^0.7.20",
        "chart.js": "^2.9.4",
        "chartist": "^0.11.4",
        "core-js": "^3.8.3",
        "d3": "^6.5.0",
        "date-fns": "^2.17.0",
        "extend": "^3.0.2",
        "gulp-cli": "^2.3.0",
        "gzipper": "^4.4.0",
        "handlebars": "^4.7.6",
        "lodash": "^4.17.20",
        "mat-table-exporter": "^9.1.0",
        "moment": "^2.29.1",
        "ng-apexcharts": "^1.5.7",
        "ng-chartist": "4.1.0",
        "ng-multiselect-dropdown": "^0.2.14",
        "ng2-charts": "^2.4.2",
        "ng2-completer": "^9.0.1",
        "ng2-dragula": "^2.1.1",
        "ng2-file-upload": "^1.4.0",
        "ng2-search-filter": "^0.5.1",
        "ngx-clipboard": "^14.0.1",
        "ngx-cookie-service": "^11.0.2",
        "ngx-custom-validators": "11.0.1",
        "ngx-pagination": "^5.0.0",
        "ngx-perfect-scrollbar": "^10.1.0",
        "ngx-quill": "^13.1.0",
        "quill": "^1.3.7",
        "rxjs": "~6.6.3",
        "rxjs-compat": "^6.6.3",
        "sass": "^1.32.6",
        "sweetalert2": "^10.14.0",
        "tslib": "^2.1.0",
        "zone.js": "~0.11.3"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "0.1101.4",
        "@angular/cli": "11.1.4",
        "@angular/compiler-cli": "11.1.2",
        "@types/chartist": "0.11.0",
        "@types/jasmine": "~3.6.3",
        "@types/jasminewd2": "~2.0.8",
        "@types/node": "^14.14.25",
        "codelyzer": "^6.0.1",
        "jasmine-core": "~3.6.0",
        "jasmine-spec-reporter": "~6.0.0",
        "karma": "~6.1.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~3.0.3",
        "karma-jasmine": "~4.0.1",
        "karma-jasmine-html-reporter": "^1.5.4",
        "protractor": "~7.0.0",
        "ts-node": "~9.1.1",
        "tslint": "~6.1.0",
        "typescript": "^4.1.3"
    }
}

Answer 1

通过执行我已经执行的操作，我将大小从 8.34 MB 减少到 1.7 MB。这 :

ng build --prod --aot --build-optimizer && gzipper compress ./dist

并通过配置我的网络服务器来使用它：(apache)

# GZIP compression for text files: HTML, CSS, JS, Text, XML, fonts
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE application/json // for my translation file
</IfModule>

缩小 main.js Angular 11 的大小

Reduce the size of main.js Angular 11

optimization

angular-cli