วิธีลดขนาดบันเดิลผลิตภัณฑ์

ฉันมีแอพง่ายๆเริ่มต้นโดยangular-cli.

มันแสดงบางเพจที่สัมพันธ์กับ 3 เส้นทาง ฉันมีส่วนประกอบ 3 อย่าง ที่หนึ่งของการใช้งานนี้ผมหน้าlodashและเชิงมุม 2 HTTP โมดูลที่จะได้รับข้อมูลบางอย่าง (โดยใช้ RxJS Observables, mapและsubscribe) ฉันแสดงองค์ประกอบเหล่านี้โดยใช้ไฟล์*ngFor.

แต่แม้ว่าแอปของฉันจะเรียบง่าย แต่ฉันก็ได้รับแพ็คเกจและแผนที่ขนาดใหญ่ (ในความคิดของฉัน) ฉันไม่ได้พูดถึงเวอร์ชัน gzip แต่เป็นขนาดก่อน gzipping คำถามนี้เป็นเพียงการสอบถามเกี่ยวกับคำแนะนำทั่วไป

ผลการทดสอบบางส่วน:

ng สร้าง

แฮช: 8efac7d6208adb8641c1 เวลา: 10129ms chunk {0} main.bundle.js, main.bundle.map (main) 18.7 kB {3} [initial] [rendered]

ก้อน {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (รูปแบบ) 155 kB {4} [เริ่มต้น] [แสดงผล]

ก้อน {2} scripts.bundle.js, scripts.bundle.map (สคริปต์) 128 kB {4} [เริ่มต้น] [แสดงผล]

ก้อน {3} vendor.bundle.js, vendor.bundle.map (ผู้ขาย) 3.96 MB [เริ่มต้น] [แสดงผล]

ก้อน {4} inline.bundle.js, inline.bundle.map (อินไลน์) 0 ไบต์ [รายการ] [แสดงผล]

รอ: แพ็คเกจบันเดิลผู้ขาย 10Mb สำหรับแอพง่ายๆเช่นนี้หรือไม่?

ng สร้าง --prod

แฮช: 09a5f095e33b2980e7cc เวลา: 23455ms ชิ้น {0} main.6273b0f04a07a1c2ad6c.bundle.js, main.6273b0f04a07a1c2ad6c.bundle.map (หลัก) 18.3 kB {3} [เริ่มต้น] [แสดงผล]

กลุ่ม {1} styles.bfdaa4d8a4eb2d0cb019.bundle.css, styles.bfdaa4d8a4eb2d0cb019.bundle.map, styles.bfdaa4d8a4eb2d0cb019.bundle.map (รูปแบบ) 154 kB [แสดงผล]

ก้อน {2} scripts.c5b720a078e5464ec211.bundle.js, scripts.c5b720a078e5464ec211.bundle.map (สคริปต์) 128 kB {4} [เริ่มต้น] [แสดงผล]

กลุ่ม {3} vendor.07af2467307e17d85438.bundle.js, vendor.07af2467307e17d85438.bundle.map (ผู้ขาย) 3.96 MB [เริ่มต้น] [แสดงผล]

กลุ่ม {4} inline.a345391d459797f81820.bundle.js, inline.a345391d459797f81820.bundle.map (อินไลน์) 0 ไบต์ [รายการ] [แสดงผล]

รออีกครั้ง: ขนาดกลุ่มผู้ขายที่ใกล้เคียงกันสำหรับ prod หรือไม่

ng build --prod --aot

แฮช: 517e4425ff872bbe3e5b เวลา: 22856ms ชิ้น {0} main.95eadabace554e3c2b43.bundle.js, main.95eadabace554e3c2b43.bundle.map (หลัก) 130 kB {3} [เริ่มต้น] [แสดงผล]

chunk {1} styles.e53a388ae1dd2b7f5434.bundle.css, styles.e53a388ae1dd2b7f5434.bundle.map, styles.e53a388ae1dd2b7f5434.bundle.map (รูปแบบ) 154 kB {4} [เริ่มต้น] [แสดงผล]

ก้อน {2} scripts.e5c2c90547f3168a7564.bundle.js, scripts.e5c2c90547f3168a7564.bundle.map (สคริปต์) 128 kB {4} [เริ่มต้น] [แสดงผล]

กลุ่ม {3} vendor.41a6c1f57136df286f14.bundle.js, vendor.41a6c1f57136df286f14.bundle.map (ผู้ให้บริการ) 2.75 MB [เริ่มต้น] [แสดงผล]

ก้อน {4} inline.97c0403c57a46c6a7920.bundle.js, inline.97c0403c57a46c6a7920.bundle.map (อินไลน์) 0 ไบต์ [รายการ] [แสดงผล]

ng build --aot

แฮช: 040cc91df4df5ffc3c3f เวลา: 11011ms chunk {0} main.bundle.js, main.bundle.map (หลัก) 130 kB {3} [เริ่มต้น] [แสดงผล]

ก้อน {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (รูปแบบ) 155 kB {4} [เริ่มต้น] [แสดงผล]

ก้อน {2} scripts.bundle.js, scripts.bundle.map (สคริปต์) 128 kB {4} [เริ่มต้น] [แสดงผล]

ก้อน {3} vendor.bundle.js, vendor.bundle.map (ผู้ขาย) 2.75 MB [เริ่มต้น] [แสดงผล]

ก้อน {4} inline.bundle.js, inline.bundle.map (อินไลน์) 0 ไบต์ [รายการ] [แสดงผล]

ดังนั้นคำถามสองสามข้อสำหรับการปรับใช้แอปของฉันบน prod:

• เหตุใดกลุ่มผู้ขายจึงมีขนาดใหญ่มาก
• ต้นไม้สั่นถูกใช้โดยangular-cliหรือไม่?
• จะปรับปรุงขนาดกลุ่มนี้ได้อย่างไร?
• ไฟล์. map จำเป็นหรือไม่?
• คุณลักษณะการทดสอบรวมอยู่ในบันเดิลหรือไม่ ฉันไม่ต้องการพวกมันในแยง
• คำถามทั่วไป: อะไรคือเครื่องมือที่แนะนำในการแพ็คสำหรับแยง? บางทีangular-cli(ใช้ Webpack ในพื้นหลัง) อาจไม่ใช่ตัวเลือกที่ดีที่สุด? เราทำได้ดีกว่านี้ไหม

ฉันค้นหาการสนทนามากมายใน Stack Overflow แต่ไม่พบคำถามทั่วไปใด ๆ

อัปเดตกุมภาพันธ์ 2020

เนื่องจากคำตอบนี้มีแรงฉุดมากฉันจึงคิดว่าควรอัปเดตด้วยการเพิ่มประสิทธิภาพเชิงมุมที่ใหม่กว่า:

1. ดังที่ผู้ตอบรายอื่นกล่าวว่าng build --prod --build-optimizerเป็นตัวเลือกที่ดีสำหรับผู้ที่ใช้ Angular v5 น้อยกว่า สำหรับเวอร์ชันที่ใหม่กว่าจะดำเนินการตามค่าเริ่มต้นด้วยng build --prod
2. อีกทางเลือกหนึ่งคือใช้การโหลดเป็นชิ้นส่วนโมดูล / การโหลดแบบขี้เกียจเพื่อแยกแอปพลิเคชันของคุณออกเป็นชิ้นเล็ก ๆ
3. เอ็นจิ้นการเรนเดอร์ Ivy มาโดยค่าเริ่มต้นใน Angular 9 ซึ่งมีขนาดมัดที่ดีกว่า
4. ตรวจสอบให้แน่ใจว่าฝ่ายบุคคลที่สามของคุณสามารถเขย่าต้นไม้ได้ หากคุณยังไม่ได้ใช้ Rxjs v6 คุณควรจะเป็น
5. หากทุกอย่างล้มเหลวให้ใช้เครื่องมือเช่นwebpack-bundle-analyzerเพื่อดูว่าอะไรเป็นสาเหตุของการขยายตัวในโมดูลของคุณ
6. ตรวจสอบว่าไฟล์ของคุณถูกบีบอัดหรือไม่

บางคนอ้างว่าการใช้ AOT คอมไพล์สามารถลดขนาดบันเดิลผู้ขายเป็น 250kb อย่างไรก็ตามในตัวอย่างของ BlackHoleGalaxy เขาใช้การคอมไพล์ AOT และยังเหลือขนาดบันเดิลของผู้ขายที่ 2.75MB ng build --prod --aotซึ่งใหญ่กว่า 250kb ที่ควรจะเป็น 10 เท่า นี่ไม่ได้อยู่นอกบรรทัดฐานสำหรับแอปพลิเคชัน angular2 แม้ว่าคุณจะใช้ v4.0 ก็ตาม 2.75MB ยังใหญ่เกินไปสำหรับทุกคนที่สนใจเรื่องประสิทธิภาพโดยเฉพาะบนอุปกรณ์พกพา

มีบางสิ่งที่คุณสามารถทำได้เพื่อช่วยในการทำงานของแอปพลิเคชันของคุณ:

1) AOT & Tree Shaking (angular-cli ทำสิ่งนี้ได้นอกกรอบ) ด้วย Angular 9 AOT เป็นค่าเริ่มต้นในสภาพแวดล้อม prod และ dev

2) การใช้ Angular Universal AKA การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (ไม่ใช่ใน cli)

3) Web Workers (อีกครั้งไม่ใช่ใน cli แต่เป็นคุณสมบัติที่ได้รับการร้องขอมาก)
ดู: https://github.com/angular/angular-cli/issues/2305

4) พนักงานบริการ
ดู: https://github.com/angular/angular-cli/issues/4006

คุณอาจไม่จำเป็นต้องใช้สิ่งเหล่านี้ทั้งหมดในแอปพลิเคชันเดียว แต่เป็นตัวเลือกบางส่วนที่มีอยู่ในปัจจุบันสำหรับการเพิ่มประสิทธิภาพเชิงมุม ฉันเชื่อ / หวังว่า Google จะตระหนักถึงข้อบกพร่องนอกกรอบในแง่ของประสิทธิภาพและมีแผนที่จะปรับปรุงสิ่งนี้ในอนาคต

นี่คือข้อมูลอ้างอิงที่พูดถึงในเชิงลึกเกี่ยวกับแนวคิดบางส่วนที่ฉันกล่าวถึงข้างต้น:

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

ใช้ angular cli เวอร์ชันล่าสุดและใช้คำสั่งng build --prod --build-optimizer มันจะลดขนาดบิลด์สำหรับ prod env อย่างแน่นอน

นี่คือสิ่งที่เครื่องมือเพิ่มประสิทธิภาพการสร้างทำภายใต้ประทุน:

เครื่องมือเพิ่มประสิทธิภาพการสร้างมีสองงานหลัก ขั้นแรกเราสามารถทำเครื่องหมายบางส่วนของแอปพลิเคชันของคุณว่าบริสุทธิ์ได้ซึ่งจะช่วยปรับปรุงการสั่นของต้นไม้ที่มาจากเครื่องมือที่มีอยู่โดยลบส่วนเพิ่มเติมของแอปพลิเคชันที่ไม่จำเป็นออก

สิ่งที่สองที่เครื่องมือเพิ่มประสิทธิภาพการสร้างทำคือการลบตัวตกแต่งเชิงมุมออกจากโค้ดรันไทม์ของแอปพลิเคชันของคุณ คอมไพเลอร์ใช้ตัวตกแต่งและไม่จำเป็นต้องใช้ในรันไทม์และสามารถลบออกได้ แต่ละงานเหล่านี้จะลดขนาดของบันเดิล JavaScript ของคุณและเพิ่มความเร็วในการบูตแอปพลิเคชันสำหรับผู้ใช้ของคุณ

หมายเหตุ : การอัปเดตหนึ่งครั้งสำหรับ Angular 5 ขึ้นไปng build --prodระบบจะดูแลกระบวนการข้างต้นโดยอัตโนมัติ :)

Lodash สามารถนำส่วนบั๊กของโค้ดไปยังบันเดิลของคุณได้ขึ้นอยู่กับว่าคุณนำเข้าจากมันอย่างไร ตัวอย่างเช่น:

// includes the entire package (very large)
import * as _ from 'lodash';

// depending on your buildchain, may still include the entire package
import { flatten } from 'lodash';

// imports only the code needed for `flatten`
import flatten from 'lodash-es/flatten'

โดยส่วนตัวแล้วฉันยังต้องการรอยเท้าที่เล็กกว่าจากฟังก์ชันยูทิลิตี้ของฉัน เช่นflattenสามารถมีส่วนร่วม1.2Kในกลุ่มของคุณหลังจากย่อขนาด ดังนั้นฉันได้สร้างคอลเลกชันของฟังก์ชัน lodash ที่เรียบง่ายขึ้น การดำเนินงานของฉันก่อรอบflatten 50 bytesคุณสามารถตรวจสอบได้ที่นี่เพื่อดูว่าเหมาะกับคุณหรือไม่: https://github.com/simontonsoftware/micro-dash

ประการแรกกลุ่มผู้ขายมีขนาดใหญ่เพียงเพราะ Angular 2 อาศัยไลบรารีจำนวนมาก ขนาดขั้นต่ำสำหรับแอพ Angular 2 อยู่ที่ประมาณ 500KB (ในบางกรณี 250KB ดูโพสต์ด้านล่าง) ต้นไม้สั่นถูกนำมาใช้อย่างถูกต้องโดย
ไม่ได้รวมถึงไฟล์เพราะใช้เฉพาะสำหรับการแก้จุดบกพร่อง ยิ่งไปกว่านั้นหากคุณใช้โมดูลทดแทนร้อนให้ถอดออกเพื่อแบ่งเบาผู้ขายangular-cli
.map

ในการแพ็คสำหรับการผลิตฉันใช้Webpack (และangular-cli ก็อาศัยมันเช่นกัน ) เพราะคุณสามารถปรับconfigure everythingให้เหมาะสมหรือดีบักได้
หากคุณต้องการใช้Webpackฉันยอมรับว่ามันค่อนข้างยุ่งยากสำหรับการดูครั้งแรก แต่ดูบทช่วยสอนในเน็ตคุณจะไม่ผิดหวัง
อื่น ๆ ใช้angular-cliซึ่งทำให้งานสำเร็จลุล่วงได้ดีจริงๆ

ใช้ไปข้างหน้าของเวลารวบรวมจะบังคับให้ปพลิเคชันเพิ่มประสิทธิภาพและลดขนาดเชิงมุม 2 app เพื่อ250KB

นี่คือ repo ฉันสร้าง ( github.com/JCornat/min-angular ) เพื่อทดสอบน้อยที่สุดเชิงมุมขนาดกำและฉันได้รับ384kB ฉันแน่ใจว่ามีวิธีง่ายๆในการเพิ่มประสิทธิภาพ

พูดคุยเกี่ยวกับปพลิเคชันขนาดใหญ่โดยใช้AngularClass / เชิงมุมเริ่มต้นการตั้งค่าเช่นเดียวกับใน repo ข้างต้นขนาดกำของฉันสำหรับปพลิเคชันขนาดใหญ่ ( 150 + ส่วนประกอบ ) เดินออกมาจาก8MB (4MB โดยไม่ต้องไฟล์แผนที่) เพื่อ580kB

วิธีแก้ปัญหาต่อไปนี้ถือว่าคุณให้บริการ dist / โฟลเดอร์โดยใช้ nodejs โปรดใช้ app.js ต่อไปนี้ในระดับราก

const express = require('express'),http = require('http'),path = require('path'),compression = require('compression');

const app = express();

app.use(express.static(path.join(__dirname, 'dist')));
app.use(compression()) //compressing dist folder 
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
})

const port = process.env.PORT || '4201';
app.set('port', port);

const server = http.createServer(app);
server.listen(port, () => console.log('Running at port ' + port))

ตรวจสอบให้แน่ใจว่าคุณติดตั้งการอ้างอิง

npm install compression --save
npm install express --save;

ตอนนี้สร้างแอป

ng build --prod --build-optimizer

หากคุณต้องการบีบอัดบิวด์เพิ่มเติมให้บอกว่าลด 300kb (โดยประมาณ) จากนั้นทำตามขั้นตอนด้านล่าง

สร้างโฟลเดอร์ที่เรียกว่าvendorภายในsrcโฟลเดอร์และภายในโฟลเดอร์ผู้ขายสร้างไฟล์rxjs.ts และวางรหัสด้านล่างลงในนั้น

export {Subject} from 'rxjs/Subject';
export {Observable} from 'rxjs/Observable';
export {Subscription} from 'rxjs/Subscription';

จากนั้นเพิ่ม follwing ในtsconfig.jsonไฟล์ในแอปพลิเคชัน angular-cli ของคุณ จากนั้นcompilerOptionsเพิ่ม json ต่อไปนี้

"paths": {
      "rxjs": [
        "./vendor/rxjs.ts"
      ]
    }

ซึ่งจะทำให้ขนาดงานสร้างของคุณเล็กเกินไป ในโครงการของฉันฉันลดขนาดจาก 11mb เหลือ 1mb หวังว่าจะช่วยได้

สิ่งหนึ่งที่ฉันอยากจะแบ่งปันคือวิธีที่ไลบรารีที่นำเข้าเพิ่มขนาดของระยะทาง ฉันนำเข้าแพ็คเกจ angular2-moment ในขณะที่ฉันสามารถจัดรูปแบบวันเวลาทั้งหมดที่ฉันต้องการได้โดยใช้ DatePipe มาตรฐานที่ส่งออกจาก @ angular / common

ด้วย Angular2-Moment "angular2-moment": "^1.6.0",

chunk {0} polyfills.036982dc15bb5fc67cb8.bundle.js (polyfills) 191 kB {4} [initial] [rendered] chunk {1} main.e7496551a26816427b68.bundle.js (main) 2.2 MB {3} [initial] [rendered] chunk {2} styles.056656ed596d26ba0192.bundle.css (รูปแบบ) 69 ไบต์ {4} [เริ่มต้น] [แสดงผล] กลุ่ม {3} vendor.62c2cfe0ca794a5006d1.bundle.js (ผู้ขาย) 3.84 MB [เริ่มต้น] [แสดงผล] กลุ่ม {4 } inline.0b9c3de53405d705e757.bundle.js (แบบอินไลน์) 0 ไบต์ [รายการ] [แสดงผล]

หลังจากลบ Angular2-moment แล้วใช้ DatePipe แทน

chunk {0} polyfills.036982dc15bb5fc67cb8.bundle.js (polyfills) 191 kB {4} [initial] [rendered] chunk {1} main.f2b62721788695a4655c.bundle.js (main) 2.2 MB {3} [initial] [rendered] กลุ่ม {2} styles.056656ed596d26ba0192.bundle.css (รูปแบบ) 69 ไบต์ {4} [เริ่มต้น] [แสดงผล] กลุ่ม {3} vendor.e1de06303258c58c9d01.bundle.js (ผู้ขาย) 3.35 MB [เริ่มต้น] [แสดงผล] กลุ่ม {4 } inline.3ae24861b3637391ba70.bundle.js (อินไลน์) 0 ไบต์ [รายการ] [แสดงผล]

โปรดทราบว่าชุดผู้ขายลดลงครึ่งเมกะไบต์!

ชี้ควรตรวจสอบว่าแพ็คเกจมาตรฐานเชิงมุมสามารถทำอะไรได้บ้างแม้ว่าคุณจะคุ้นเคยกับ lib ภายนอกแล้วก็ตาม

อีกวิธีหนึ่งในการลดบันเดิลคือการให้บริการ GZIP แทน JS เราไปจาก 2.6mb เป็น 543ko

https://httpd.apache.org/docs/2.4/mod/mod_deflate.html

หากคุณเคยวิ่งng build --prod- คุณไม่ควรมีvendorไฟล์เลย

ถ้าฉันวิ่งเฉยๆng build- ฉันได้รับไฟล์เหล่านี้:

ขนาดรวมของโฟลเดอร์คือ ~ 14MB Waat! : D

แต่ถ้าฉันเรียกใช้ng build --prod- ฉันได้รับไฟล์เหล่านี้:

ขนาดรวมของโฟลเดอร์คือ 584K

หนึ่งและรหัสเดียวกัน ฉันเปิดใช้งาน Ivy ในทั้งสองกรณี เชิงมุมคือ 8.2.13

ฉันเดาว่าคุณไม่ได้เพิ่ม--prodคำสั่ง build ของคุณ?

หากคุณใช้ Angular 8+ และต้องการลดขนาดของบันเดิลคุณสามารถใช้ Ivy Ivy มาเป็นเครื่องมือดูเริ่มต้นใน Angular 9 เพียงไปที่ src / tsconfig.app.json และเพิ่มพารามิเตอร์ angularCompilerOptions ตัวอย่างเช่น:

{
  "extends": ...,
  "compilerOptions":...,
  "exclude": ...,

/* add this one */ 
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

สิ่งนี้ลดขนาดลงในกรณีของฉัน:

ng build --prod --build-optimizer --optimization.

สำหรับ Angular 5+ ng-build --prod จะทำตามค่าเริ่มต้น ขนาดหลังจากรันคำสั่งนี้ลดลงจาก 1.7MB เป็น 1.2MB แต่ไม่เพียงพอสำหรับวัตถุประสงค์ในการผลิตของฉัน

ฉันทำงานบนแพลตฟอร์ม facebook messenger และแอพ Messenger ต้องมีขนาดน้อยกว่า 1MB เพื่อทำงานบนแพลตฟอร์ม Messenger พยายามหาวิธีแก้ปัญหาต้นไม้สั่นไหว แต่ยังไม่มีโชค

มันใช้งานได้ 100% ng build --prod --aot --build-optimizer --vendor-chunk = true

ฉันมีแอพพลิเคชั่น boot boot แบบเชิงมุม 5+ (application.properties 1.3+) ด้วยความช่วยเหลือของการบีบอัด (ลิงค์ที่แนบด้านล่าง) สามารถลดขนาดของ main.bundle.ts จาก 2.7 MB เป็น 530 KB

นอกจากนี้โดยค่าเริ่มต้น --aot และ --build-optimizer จะเปิดใช้งานด้วยโหมด --prod คุณไม่จำเป็นต้องระบุแยกกัน

https://stackoverflow.com/a/28216983/9491345

ตรวจสอบว่าคุณมีการกำหนดค่าชื่อ "การผลิต" สำหรับ ng build --prod เนื่องจากเป็นชวเลขสำหรับ ng build --configuration = production ไม่มีคำตอบช่วยแก้ปัญหาของฉันได้เพราะปัญหาอยู่ตรงหน้าจอ ฉันคิดว่านี่อาจเป็นเรื่องธรรมดา ... ฉันได้ทำให้แอพเป็นสากลด้วย i18n เปลี่ยนชื่อการกำหนดค่าทั้งหมดเป็นเช่น production-en จากนั้นฉันสร้างด้วย ng build --prod โดยสมมติว่ามีการใช้การเพิ่มประสิทธิภาพเริ่มต้นและควรใกล้เคียงกับที่ดีที่สุด แต่ในความเป็นจริงเพียงแค่สร้าง ng ได้รับการดำเนินการส่งผลให้บันเดิล 7mb แทนที่จะเป็น 250kb

นำมาจาก angular docs v9 ( https://angular.io/guide/workspace-config#alternate-build-configurations ):

โดยค่าเริ่มต้นจะมีการกำหนดคอนฟิกูเรชันการผลิตและคำสั่ง ng build มีอ็อพชัน --prod ที่สร้างโดยใช้คอนฟิกูเรชันนี้ การกำหนดค่าการผลิตชุดค่าเริ่มต้นที่เพิ่มประสิทธิภาพของแอปในหลายวิธีเช่นbundling ไฟล์ , การลดช่องว่างส่วนเกิน , การลบความคิดเห็นและรหัสตายและการเขียนโค้ดเพื่อการใช้งานสั้นชื่อคลุมเครือ ( "minification" )

นอกจากนี้คุณสามารถบีบอัดการปรับใช้ทั้งหมดของคุณด้วย @ angular-builders / custom-webpack: ตัวสร้างเบราว์เซอร์ที่ webpack.config.js ที่กำหนดเองของคุณมีลักษณะดังนี้:

module.exports = {
  entry: {
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js'
  },
  plugins: [
    new CompressionPlugin({
      deleteOriginalAssets: true,
    })
  ]
};

หลังจากนั้นคุณจะต้องกำหนดค่าเว็บเซิร์ฟเวอร์ของคุณเพื่อให้บริการเนื้อหาที่บีบอัดเช่นด้วย nginx คุณต้องเพิ่มลงใน nginx.conf ของคุณ:

server {
    gzip on;
    gzip_types      text/plain application/xml;
    gzip_proxied    no-cache no-store private expired auth;
    gzip_min_length 1000;
    ...
}

ในกรณีของฉันโฟลเดอร์ dist หดตัวจาก 25 เป็น 5 mb หลังจากใช้เพียง --prod ในโครงสร้าง ng จากนั้นลดลงเหลือ 1.5mb หลังจากการบีบอัด