การเพิ่มประสิทธิภาพขนาดมัดเชิงมุม
ภาพรวม
เป็นเรื่องน่าเจ็บปวดที่ได้รับจากลูกค้าคนสำคัญของคุณว่าเว็บแอปของคุณใช้เวลาโหลดนานเกินไปและช้ามาก มีบทความนับแสนบทความที่พูดคุยเกี่ยวกับการปรับปรุงประสิทธิภาพของแอป เช่น การโหลดแบบ 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
สามารถสร้างการแสดงภาพแผนผังเชิงโต้ตอบของเนื้อหาของบันเดิลทั้งหมดของคุณได้
เพียงทำตามขั้นตอนด้านล่างเพื่อสร้างการแสดงภาพสำหรับชุดรวมของคุณ
npm install -g webpack-bundle-analyzer
- ในแอป Angular ของคุณ ให้รัน
ng build --stats-json
สิ่งนี้จะสร้างการค้นหาเพิ่มเติมstats.json
ในโฟลเดอร์./dist
ของคุณ - สุดท้าย ให้รัน
webpack-bundle-analyzer ./dist/stats.json
แล้วเบราว์เซอร์ของคุณจะแสดงหน้าที่localhost:8888
จีซิปเปอร์
gzipper เป็นแพ็คเกจ NPM ซึ่งมี CLI สำหรับการบีบอัดไฟล์โดยใช้อัลกอริธึมการบีบอัดยอดนิยมเช่น Brotli และ Gzip นอกจากนี้ โมดูลนี้ยังใช้งานได้ดีกับเครื่องมือ CLI UI มากมาย (Angular CLI, Vue CLI, create-react-app) และรองรับการตั้งค่าสถานะตัวเลือกบางส่วนสำหรับแต่ละอัลกอริทึม
- ติดตั้ง 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 ของคุณ
- ติดตั้ง
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
ลงในแล็ปท็อปของคุณ
- ImageOptim: https://imageoptim.com
- รูปภาพอัลฟ่า: https://pngmini.com
4. เรียกใช้สคริปต์ npm เพื่อปรับไฟล์รูปภาพทั้งหมดให้เหมาะสม
npm run imageoptim
ImageOptim จะถ่ายภาพเป็นชุดและปรับให้เหมาะสม กระบวนการนี้อาจใช้เวลานานเล็กน้อยขึ้นอยู่กับจำนวนและขนาดของรูปภาพ
โปรดไปที่เอกสารประกอบ ImageOptim สำหรับรายละเอียดเพิ่มเติม
หวังว่าคุณจะสนุกกับบทความนี้และเรียนรู้สิ่งใหม่ สมัครสมาชิกสำหรับบทความถัดไปของฉัน