การสร้างและดูตัวอย่าง
เรียกใช้ vite build และ vite preview เพื่อตรวจสอบการสร้างสำหรับใช้งานจริงบนเครื่องของคุณ
การสร้างและดูตัวอย่าง เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คำสั่งสร้าง
เรียกใช้สคริปต์สร้างเพื่อสร้างผลลัพธ์ที่พร้อมใช้งานจริง
npm run buildการสร้างทำอะไร
Vite รวมโค้ด ตัดโค้ดที่ไม่ใช้ และย่อขนาดโค้ดของคุณ SvelteKit จะใช้อะแดปเตอร์ที่เลือก
ดูตัวอย่างในเครื่อง
ใช้สคริปต์ดูตัวอย่างเพื่อทดสอบการสร้างสำหรับใช้งานจริงในเครื่อง
npm run previewเหตุผลที่ควรดูตัวอย่าง
การดูตัวอย่างใกล้เคียงสภาพใช้งานจริงมากกว่าโหมดพัฒนา เพราะให้บริการชุดโค้ดที่สร้างแล้ว ไม่ใช่โค้ดที่ติดเครื่องมือ HMR
ผลลัพธ์การสร้าง
โดยค่าเริ่มต้น ผลลัพธ์จะอยู่ใน build/ อะแดปเตอร์แต่ละตัวจะปรับแต่งโครงสร้างให้แตกต่างกัน
ข้อผิดพลาดในการสร้าง
ข้อผิดพลาดของ TypeScript และปัญหาการนำเข้าจะแสดงที่นี่ ให้แก้ไขก่อนนำไปใช้งาน
ตรวจสอบประสิทธิภาพ
เรียกใช้ Lighthouse กับ npm run preview เพื่อประเมินประสิทธิภาพจริง
วิเคราะห์ชุดโค้ด
เพิ่ม vite-bundle-visualizer หรือ rollup-plugin-visualizer เพื่อตรวจสอบองค์ประกอบของชุดโค้ด
ไฟล์สภาพแวดล้อม
การสร้างสำหรับใช้งานจริงจะใช้ .env.production เป็นค่าเริ่มต้น ส่วนโหมดพัฒนาจะใช้ .env
แผนที่ซอร์ส
เปิดใช้แผนที่ซอร์สสำหรับใช้งานจริงเพื่อเฝ้าติดตามข้อผิดพลาด โดยชั่งน้ำหนักระหว่างความเป็นส่วนตัวกับความสามารถในการแก้ไขข้อผิดพลาด
การสร้างใน CI
เรียกใช้การสร้างใน CI ก่อนนำไปใช้งาน เพื่อค้นหาปัญหาแต่เนิ่น ๆ
ตรวจสอบอย่างรวดเร็ว
npm run preview ทำอะไร
สรุปทบทวน
ใช้ build สำหรับใช้งานจริง และใช้ preview สำหรับการทดสอบในเครื่องที่จำลองสภาพใช้งานจริงก่อนนำไปใช้งาน
คำถามที่พบบ่อย
บทเรียน “การสร้างและดูตัวอย่าง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสร้างและดูตัวอย่าง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสร้างและดูตัวอย่าง”
เรียกใช้ vite build และ vite preview เพื่อตรวจสอบการสร้างสำหรับใช้งานจริงบนเครื่องของคุณ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การสร้างและดูตัวอย่าง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- adapter-static สำหรับเว็บไซต์แบบสแตติก
- adapter-node สำหรับเซิร์ฟเวอร์ Node.js
- adapter-vercel และ adapter-cloudflare
- การสร้างและดูตัวอย่าง