การเพิ่มประสิทธิภาพขนาดมัดเชิงมุม

ภาพรวม

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

วันนี้การอภิปรายเป็นเรื่องเกี่ยวกับวิธีลดขนาดมัด Angular ในวิธีที่ง่ายมาก

ชุดปัจจุบันของคุณใหญ่แค่ไหน?

ด้วยการรัน ng build --prod คุณจะพบขนาดบันเดิลปัจจุบันของคุณ ให้ฉันสร้างหนึ่งในโปรเจ็กต์ Angular ที่มีมากกว่า 100 โมดูลในนั้น (เชื่อฉันเถอะว่าฉันไม่นับโมดูลการกำหนดเส้นทาง)

โครงสร้างประกอบด้วย 142 ชิ้นและไฟล์ที่มีขนาดใหญ่กว่ามากมีดังต่อไปนี้

  • main.*.js : 3.3MB
  • polyfills.*.js : 1.5MB
  • styles.*.js : 1.5MB
  • scripts.*.js : 1.1MB
  • runtime.*.js (ในบางโครงการขึ้นอยู่กับวิธีที่คุณจัดโครงสร้างโมดูลของคุณ)

โดยปกติแล้ว ในบรรดาไฟล์ขนาดใหญ่เหล่านั้น main.*.js มีแนวโน้มที่จะใหญ่และบ้าคลั่งมาก คุณสามารถใช้เวลาหลายสัปดาห์หรือหลายเดือนในการเปลี่ยนแปลงโค้ดและกระบวนการปรับโครงสร้างซ้ำหลายครั้ง แต่การทำเช่นนี้อาจเป็นเรื่องที่เจ็บปวดมาก แต่ก็ยากที่จะปฏิเสธว่าเวลาในการโหลดหน้าแรกนั้นสัมพันธ์กับขนาดชุดแอป Angular ของคุณอย่างแน่นหนา

ตัววิเคราะห์บันเดิล

webpack-bundle-analyzer สามารถสร้างการแสดงภาพแผนผังเชิงโต้ตอบของเนื้อหาของบันเดิลทั้งหมดของคุณได้

เพียงทำตามขั้นตอนด้านล่างเพื่อสร้างการแสดงภาพสำหรับชุดรวมของคุณ

  1. npm install -g webpack-bundle-analyzer
  2. ในแอป Angular ของคุณ ให้รัน ng build --stats-json สิ่งนี้จะสร้างการค้นหาเพิ่มเติม stats.json ในโฟลเดอร์ ./dist ของคุณ
  3. สุดท้าย ให้รัน webpack-bundle-analyzer ./dist/stats.json แล้วเบราว์เซอร์ของคุณจะแสดงหน้าที่ localhost:8888

จีซิปเปอร์

gzipper เป็นแพ็คเกจ NPM ซึ่งมี CLI สำหรับการบีบอัดไฟล์โดยใช้อัลกอริธึมการบีบอัดยอดนิยมเช่น Brotli และ Gzip นอกจากนี้ โมดูลนี้ยังใช้งานได้ดีกับเครื่องมือ CLI UI มากมาย (Angular CLI, Vue CLI, create-react-app) และรองรับการตั้งค่าสถานะตัวเลือกบางส่วนสำหรับแต่ละอัลกอริทึม

  1. ติดตั้ง zip เป็นการพึ่งพา Dev สำหรับโปรเจ็กต์ของคุณ
npm i -D gzipper

หรือสามารถติดตั้งได้ทั่วโลก

npm i -g gzipper

2. สร้างโครงการของคุณด้วยแฟล็ก --prod, --aot และ --build-optimizer หากคุณไม่คุ้นเคยกับ --build-optimizer จะเปิดใช้งานการเพิ่มประสิทธิภาพ '@เชิงมุม-devkit/build-optimizer' เมื่อใช้ตัวเลือก 'aot'

ng build --prod --aot --build-optimizer

ตอนนี้คุณจะมี ./dist พร้อม App Bundle

3. ในการบีบอัด App Bundle ให้รันคำสั่งด้านล่าง

gzipper --verbose ./dist

เมื่อคุณตรวจสอบโฟลเดอร์ ./dist ในตอนนี้ คุณจะสังเกตเห็นว่ามีการสร้างไฟล์ gziped ใหม่สำหรับแต่ละไฟล์ในโฟลเดอร์ ./dist ขนาดไฟล์เพิ่มเติมของไฟล์เวอร์ชันบีบอัดจะเล็กลงมาก ตามภาพหน้าจอด้านล่าง ขนาดไฟล์ main.*.js ลดลง 78% ใน main.*.js.gz

  • main.*.js.gz : 735KB
  • polyfills.*.js.gz : 446KB
  • styles.*.js.gz : 322KB
  • scripts.*.js.gz : 288KB

gzipper สามารถจำกัดเฉพาะนามสกุลไฟล์ที่กำหนดด้วยแฟล็ก --include

gzipper --verbose --include js,html,scss,css,svg,json ./dist

4. สำหรับการใช้งานในระยะยาวให้อัพเดต package.json ของคุณด้วยสคริปต์ใหม่ดังต่อไปนี้

"scripts": {
   "build:prod": "ng build --prod --aot --build-optimizer && gzipper --verbose ./dist"
},

ใช้คำสั่งต่อไปนี้เพื่อสร้างเพื่อการผลิต

npm run build:prod

การปรับใช้กับ NGINX

ตอนนี้คุณมีไฟล์ App Bundle ดั้งเดิมและไฟล์ gzipped หลายร้อยไฟล์ในโฟลเดอร์ ./dist เดียวกัน

หากต้องการปรับใช้ App Bundle กับ NGINX คุณต้องทำการเปลี่ยนแปลงเล็กน้อยกับไฟล์ nginx.conf ที่มีอยู่ คุณต้องมีโมดูล HttpGzipStatic สำหรับสิ่งนี้ ใส่ gzip_static on; ในการกำหนดค่าของคุณ

คุณจะต้องเก็บทั้งไฟล์ซิปและไฟล์ต้นฉบับ จากนั้นคุณสามารถขอ เช่น /css.css และรับไฟล์ซิป /css.css.gz

server {
  listen 80;
  charset utf-8;
  sendfile on;
  root /usr/share/nginx/html;
  gzip_static on;
  location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
    expires 7d;
  }
   
  location / {
    expires 12h;
    try_files $uri $uri/ /index.html = 404;
  }
}

คุณสามารถเปลี่ยนการกำหนดค่า location, expires ได้ตามความต้องการของคุณ

หากคุณต้องการปรับใช้ Docker Dockerfile จะมีลักษณะดังนี้

FROM nginx
COPY nginx.conf /etc/nginx/conf.d/default.conf
WORKDIR /usr/share/nginx/html
COPY dist/ /usr/share/nginx/html

หากการกำหนดค่าทั้งหมดเสร็จสมบูรณ์ ส่วนหัวการตอบสนอง content-encoding: gzip จะสามารถสังเกตได้สำหรับไฟล์ที่บีบอัดในเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์

การเพิ่มประสิทธิภาพภาพ

imageoptim เป็นปลั๊กอิน NPM ที่ยอดเยี่ยมซึ่งสามารถใช้เพื่อเพิ่มประสิทธิภาพรูปภาพทั้งหมดใน Angular Project ของคุณ

  1. ติดตั้ง imageoptim-cli
npm install -g imageoptim-cli
- or -
brew update
brew install imageoptim-cli

2. เพิ่มสคริปต์ไปที่ package.jsonเพื่อเรียกใช้ imageoptim เปลี่ยนคำสั่งให้ตรงกับโฟลเดอร์รูปภาพของคุณ

"scripts": {
  "imageoptim": "imageoptim --imagealpha 'src/assets/**/*.png'"
 },

3. ติดตั้งแอปพลิเคชัน ImageOptim และ ImageAlpha ลงในแล็ปท็อปของคุณ

4. เรียกใช้สคริปต์ npm เพื่อปรับไฟล์รูปภาพทั้งหมดให้เหมาะสม

npm run imageoptim

ImageOptim จะถ่ายภาพเป็นชุดและปรับให้เหมาะสม กระบวนการนี้อาจใช้เวลานานเล็กน้อยขึ้นอยู่กับจำนวนและขนาดของรูปภาพ

โปรดไปที่เอกสารประกอบ ImageOptim สำหรับรายละเอียดเพิ่มเติม

หวังว่าคุณจะสนุกกับบทความนี้และเรียนรู้สิ่งใหม่ สมัครสมาชิกสำหรับบทความถัดไปของฉัน