Vue Academy · บทเรียน

การเพิ่มประสิทธิภาพกระบวนการสร้าง

สร้างชุดโปรแกรมสำหรับใช้งานจริงที่ได้รับการเพิ่มประสิทธิภาพ

การเพิ่มประสิทธิภาพกระบวนการสร้าง เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

จากการพัฒนาสู่การใช้งานจริง

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

การเรียกใช้การบิลด์

คำสั่งมาตรฐานจะบิลด์แอปของคุณสำหรับใช้งานจริง Vite ซึ่งเป็นชุดเครื่องมือเริ่มต้นของ Vue 3 จะคอมไพล์ รวมชุด และปรับทุกอย่างให้เหมาะสม

npm run build

ผลลัพธ์จากการบิลด์

การบิลด์จะเขียนไฟล์ที่ปรับให้เหมาะสมลงในโฟลเดอร์ dist ซึ่งประกอบด้วย index.html ชุดรวม JavaScript และ CSS ที่มีแฮช รวมถึงไฟล์ทรัพยากรสแตติกของคุณ โฟลเดอร์นี้คือสิ่งที่คุณจะนำไปติดตั้ง

dist/
  index.html
  assets/
    index-a1b2c3.js
    index-d4e5f6.css

การลดขนาดโค้ด

การลดขนาดโค้ด จะตัดช่องว่างและความคิดเห็นออก รวมถึงย่อชื่อตัวแปร เพื่อให้ดาวน์โหลดไฟล์ได้เร็วขึ้น บิลด์สำหรับใช้งานจริงจะลดขนาด JavaScript และ CSS ให้อัตโนมัติ

การตัดโค้ดที่ไม่ได้ใช้

การตัดโค้ดที่ไม่ได้ใช้ จะลบโค้ดที่คุณไม่เคยใช้ หากคุณนำเข้าฟังก์ชันเดียวจากไลบรารี ตัวรวมชุดจะตัดส่วนที่เหลือออก ให้ใช้การนำเข้าแบบระบุชื่อจากโมดูล ES เพื่อให้การตัดโค้ดที่ไม่ได้ใช้ทำงานได้

// only what you use is bundled
import { debounce } from "lodash-es"

การทำแฮชเนื้อหา

ชื่อไฟล์ผลลัพธ์จากการบิลด์จะมีแฮชของเนื้อหา เช่น index-a1b2c3.js เมื่อโค้ดเปลี่ยน แฮชก็จะเปลี่ยนตาม ทำให้เบราว์เซอร์ดึงไฟล์ใหม่ ส่วนไฟล์ที่ไม่เปลี่ยนแปลงจะถูกแคชไว้อย่างมีประสิทธิภาพ

การวิเคราะห์ขนาดชุดรวม

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

npm install -D rollup-plugin-visualizer

การอ่านผลการวิเคราะห์

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

ตัวแปรสภาพแวดล้อม

Vite จะเผยตัวแปรสภาพแวดล้อมที่ขึ้นต้นด้วย VITE_ ผ่าน import.meta.env ให้ใช้ตัวแปรเหล่านี้เพื่อกำหนดค่า URL ของ API และสวิตช์ฟีเจอร์ตามแต่ละสภาพแวดล้อม

// .env.production
// VITE_API_URL=https://api.example.com

const apiUrl = import.meta.env.VITE_API_URL

บิลด์เฉพาะสภาพแวดล้อม

Vite จะโหลด .env.production ระหว่าง npm run build และโหลด .env.development ระหว่าง npm run dev ดังนั้นแต่ละสภาพแวดล้อมจึงได้รับการกำหนดค่าที่ถูกต้องโดยอัตโนมัติ

// .env.development -> VITE_API_URL=http://localhost:3000
// .env.production  -> VITE_API_URL=https://api.example.com

การดูตัวอย่างบิลด์

ก่อนนำไปติดตั้ง ให้เรียกใช้ตัวอย่างบิลด์สำหรับใช้งานจริงในเครื่อง เพื่อยืนยันว่าทำงานได้ตามที่คาดไว้ด้วยไฟล์จริงที่ผ่านการปรับให้เหมาะสมแล้ว

npm run build
npm run preview

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับกระบวนการบิลด์ของคุณ

สรุปทบทวน

เรียกใช้ npm run build เพื่อสร้างโฟลเดอร์ dist ที่ปรับให้เหมาะสม พร้อมไฟล์ทรัพยากรที่ลดขนาด ตัดโค้ดที่ไม่ได้ใช้ และมีแฮชของเนื้อหา วิเคราะห์ขนาดชุดรวมเพื่อลดการพึ่งพาที่มีขนาดใหญ่ และใช้ตัวแปรสภาพแวดล้อม VITE_ ร่วมกับไฟล์ .env เพื่อกำหนดค่าตามแต่ละสภาพแวดล้อม ดูตัวอย่างก่อนนำขึ้นใช้งาน บทถัดไป คุณจะนำบิลด์นี้ไปติดตั้งบนแพลตฟอร์มโฮสต์

คำถามที่พบบ่อย

บทเรียน “การเพิ่มประสิทธิภาพกระบวนการสร้าง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเพิ่มประสิทธิภาพกระบวนการสร้าง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเพิ่มประสิทธิภาพกระบวนการสร้าง”

สร้างชุดโปรแกรมสำหรับใช้งานจริงที่ได้รับการเพิ่มประสิทธิภาพ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “การเพิ่มประสิทธิภาพกระบวนการสร้าง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Vue Academy