Fatal编程技术网

Optimization 减小main.js.11的大小

optimization

Optimization 减小main.js.11的大小,optimization,angular-cli,Optimization,Angular Cli,我遇到了一个问题，我的应用程序有一个main.js，defalt（ng build）的大小为8.34 MB。 我测试了很多！很多事情来减少它，但我只是没有达到 我真的需要小于2MB的大小。。（我觉得它也很大……） 谢谢你的帮助！ 我尝试的内容（main.js的大小）： package.json { "name": "app", "version": "0.0.0", "scripts

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

我真的需要小于2MB的大小。。（我觉得它也很大……） 谢谢你的帮助！ 我尝试的内容（main.js的大小）：

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"
    }
}
通过做我已经做过的事情，我将大小从8.34MB减少到了1.7MB。 这：

ng build--prod--aot--build优化器和&gzip压缩程序。/dist

通过配置我的web服务器来使用：（apache）

文本文件的压缩：HTML、CSS、JS、文本、XML、字体 AddOutputFilterByType DEFLATE应用程序/javascript AddOutputFilterByType DEFLATE应用程序/rss+xml AddOutputFilterByType DEFLATE应用程序/vnd.ms-fontobject AddOutputFilterByType放气应用程序/x-font AddOutputFilterByType放气应用程序/x-font-opentype AddOutputFilterByType放气应用程序/x-font-otf AddOutputFilterByType放气应用程序/x-font-truetype AddOutputFilterByType放气应用程序/x-font-ttf AddOutputFilterByType DEFLATE应用程序/x-javascript AddOutputFilterByType DEFLATE应用程序/xhtml+xml AddOutputFilterByType DEFLATE应用程序/xml AddOutputFilterByType泄气字体/opentype AddOutputFilterByType DEFLATE字体/otf AddOutputFilterByType DEFLATE字体/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType放气图像/x图标 AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType泄气文本/普通 AddOutputFilterByType DEFLATE text/xml 我的翻译文件的AddOutputFilterByType DEFLATE应用程序/json//
不确定我们能为此做些什么，看起来您有很多第三方依赖关系，这些libs树是否不稳定？例如，
sweetalert2
不是。我建议你试试
webpack bundle analyzer
，看看是什么导致你的应用程序膨胀。gzip似乎在工作，但我的页面只是加载main.js而不是main.js.gz。。。在我的dist目录中，我有content.js和.js.gz 
{
    "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"
    }
}

# 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>