Javascript 供应商捆绑包大小没有减少
我试图让我的构建变得更小，以加快我的加载时间，但是当我运行Javascript 供应商捆绑包大小没有减少,javascript,angular,webpack,Javascript,Angular,Webpack,我试图让我的构建变得更小，以加快我的加载时间，但是当我运行 ng build--prod--aot--vendor chunk--common chunk--build optimizer，然后从google开发工具运行lighthouse报告 我明白了 奇怪的是，如果我进入dist文件夹查看文件大小，它似乎起了作用，而文件大小似乎比灯塔报告的要小 到目前为止，通过执行以下操作来减小尺寸： 已删除旧的/未使用的package.json条目 将所有材质导入更改为特定路径，如我现在导入的pag
ng build--prod--aot--vendor chunk--common chunk--build optimizer- 已删除旧的/未使用的package.json条目
- 将所有材质导入更改为特定路径，如我现在导入的paginator
从“@angular/material/paginator”导入{MatPaginator} 而不是从“@angular/material/”导入{MatPaginator}”根据其他帖子的建议 - 将moment替换为moment.min.js，这样就不会添加区域设置
- 添加了用于文本压缩的brotli
webpack.config.js自定义webpack.config.js "architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js"
},
{
"name": "mean-course",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --mode development --open",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:server": "nodemon backend/server.js"
},
"private": true,
"dependencies": {
"@angular/animations": "^8.2.13",
"@angular/cdk": "~8.2.2",
"@angular/common": "~8.2.4",
"@angular/compiler": "~8.2.4",
"@angular/core": "~8.2.4",
"@angular/forms": "~8.2.4",
"@angular/material": "^8.2.2",
"@angular/platform-browser": "~8.2.4",
"@angular/platform-browser-dynamic": "~8.2.4",
"@angular/router": "~8.2.4",
"@ng-bootstrap/ng-bootstrap": "^5.1.5",
"@ngrx/store": "^8.6.0",
"ably": "^1.1.22",
"angular-doka": "file:src/angular-doka",
"angular-filepond": "^1.0.5",
"azure-arm-rediscache": "^3.0.0",
"bootstrap": "^4.4.1",
"classlist.js": "^1.1.20150312",
"countdown": "^2.6.0",
"dotenv": "^8.2.0",
"filepond": "^4.13.4",
"filepond-plugin-file-encode": "^2.1.5",
"filepond-plugin-file-validate-size": "^2.2.0",
"filepond-plugin-file-validate-type": "^1.2.5",
"filepond-plugin-image-crop": "^2.0.3",
"filepond-plugin-image-edit": "^1.6.0",
"filepond-plugin-image-exif-orientation": "^1.0.7",
"filepond-plugin-image-preview": "^4.6.1",
"filepond-plugin-image-resize": "^2.0.4",
"filepond-plugin-image-transform": "^3.7.2",
"jquery": "^3.5.1",
"jsonwebtoken": "^8.5.1",
"lib-storage-service": "^1.0.2",
"material": "^0.4.1",
"moment-mini": "^2.24.0",
"ng-starrating": "^1.0.20",
"ngx-bar-rating": "^1.1.0",
"ngx-clipboard": "^12.3.0",
"ngx-device-detector": "^1.3.20",
"ngx-filepond": "^5.0.1",
"ngx-light-carousel": "^1.0.37-beta.8",
"ngx-pagination": "^5.0.0",
"ngx-simple-countdown": "^1.0.2",
"ngx-spinner": "^8.0.3",
"ngx-toastr": "^11.2.1",
"ngx-ui-carousel": "^1.3.2",
"numeral": "^2.0.6",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"tsoa": "^2.5.7",
"uid": "0.0.2",
"web-animations-js": "^2.3.2",
"yamljs": "^0.3.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-builders/custom-webpack": "8.4.1",
"@angular-devkit/build-angular": "^0.803.26",
"@angular/cli": "~8.3.2",
"@angular/compiler-cli": "~8.2.4",
"@angular/language-service": "~8.2.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^8.10.59",
"brotli-gzip-webpack-plugin": "^0.5.0",
"brotli-webpack-plugin": "^1.1.0",
"codelyzer": "^5.0.0",
"compression-webpack-plugin": "^4.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
},
"browser": {
"crypto": false
}
}
ng build--prod时，这里有一个stats.json文件
这里还有一个更详细的版本
删除ngx spinner、filepond等大型库，因为它们不可树上移动。另外，如果您还没有将服务器配置为提供gzip文件，请执行此操作。它将使您的尺寸大大减小。另外，在使用gzip all之类的实用程序构建my之后，还要预gzip您的js文件
还可以更改服务器最大缓存策略以获得缓存好处。在进行更改或使用incongnito浏览器后，您是否尝试过清除缓存？可能您的旧捆绑包被更改了，浏览器继续使用这些.show供应商图像。{hash}.js是从stats.json创建的。我添加了更详细的版本above@Narm我正在使用chrome incognito运行lighthouse Report您使用的是哪个版本的angular？