บทนำ

หากคุณกำลังทำงานกับเว็บแอปพลิเคชันที่ซับซ้อนซึ่งใช้ React และ Webpack คุณอาจเคยคิดที่จะเลิกใช้ Webpack มากกว่าหนึ่งครั้งเนื่องจากข้อบกพร่องและความช้า บทช่วยสอนนี้จะอธิบายวิธีที่ง่ายที่สุดในการแก้ปัญหานี้

Webpack มีปัญหาอะไร?

Webpack ช้า!

ต่อไปนี้เป็นปัญหาที่ทีมนักพัฒนาของเรารายงาน:

• เวลาเริ่มต้นเซิร์ฟเวอร์ Dev ช้า ประมาณ 1:30 นาที (และเพิ่มขึ้นอย่างต่อเนื่อง)
• เวลารีเฟรช HMR ช้า ประมาณ 5–10 วินาที (บางครั้งก็ติดขัดด้วย)
• ประสบการณ์ในการพัฒนาโดยทั่วไปนั้นน่ารำคาญและไม่เกิดผล

การวิจัยสั้น ๆ จะแสดงให้คุณเห็นว่ามีทางเลือกอื่นที่ดีกว่ามากมาย และตัวเลือกที่ได้รับความนิยมมากที่สุดคือ Vite ( vitejs.dev )

Vite เป็นเครื่องมือที่ยอดเยี่ยม Webpack ไม่มีปัญหาใด ๆ แต่เป็นการยากที่จะแทนที่ Webpack อย่างสมบูรณ์เนื่องจากการปรับแต่งการผลิตที่มีอยู่และความกลัวของทีมพัฒนาที่อาจทำงานได้ไม่ดี

ดังนั้นวิธีแก้ปัญหาของฉันคือเพิ่ม Vite ให้ทำงานร่วมกับ Webpack แทนการแทนที่ทั้งหมด

ปัญหาที่พบและวิธีแก้ไข

ฉันไม่พบบทช่วยสอนที่ดีเกี่ยวกับวิธีรวม Vite เข้ากับโครงการที่มีอยู่ ดังนั้นโชคดีสำหรับคุณ ฉันใช้เวลาศึกษาค้นคว้าจำนวนมหาศาลเพื่อหาทางออกที่ดีสำหรับปัญหาทั้งหมด ดังนั้นคุณไม่จำเป็นต้องทำ

ขั้นตอนแรกที่คุณต้องทำคือเพิ่ม แพ็คเกจ viteและ@vitejs/plugin-reactให้กับโปรเจ็กต์ที่คุณมีอยู่และสร้างvite.config.js(ที่รูทของโปรเจ็กต์)

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  type: "module",
  plugins: [],
  optimizeDeps: {
    include: ["react"],
  },
  build: {
    commonjsOptions: {
      include: [/node_modules/],
    },
  },
});

นี่คือเหตุผลหลักสำหรับสิ่งนั้น:

1. Vite ไม่สามารถทำงานกับตัวแปร env ที่มีอยู่ได้
2. Vite ล้มเหลวในการประมวลผลแพ็คเกจ npm เก่าบางแพ็คเกจที่ไม่มีเวอร์ชันใหม่
3. Vite ไม่สามารถดำเนินการนำเข้าโดยใช้ "require"
4. การกำหนดค่า Webpack ของเรามีคำจำกัดความที่กำหนดเองของการนำเข้า "นามแฝง" ดังนั้น Vite จึงไม่ทราบวิธีดำเนินการ
5. Webpack config ของเรากำหนดการตั้งค่าพร็อกซีที่กำหนดเอง

เว็บแอปพลิเคชันของเราใช้ตัวแปร env ในแบบ CRA (Create React App)

ตัวอย่าง:process.env.REACT_APP_VARIABLE_NAME

แต่ Vite กำหนดวิธีที่แตกต่างในการจัดการตัวแปร env

แบบนี้:import.meta.env.VARIABLE_NAME

ดังนั้นฉันจึงมองหาวิธีที่จะบอก Vite ให้กำหนดตัวแปร env ให้แตกต่างออกไป ฉันพบปลั๊กอินที่ดีซึ่งทำสภาพแวดล้อมของ ปลั๊กอินนั้นได้อย่างแม่นยำ

การเพิ่มปลั๊กอินนี้ในไฟล์กำหนดค่าจะช่วยแก้ปัญหานี้ได้

plugins: [
    ...
    EnvironmentPlugin("all"),
]

นี่เป็นหนึ่งในปัญหาที่ใหญ่ที่สุดของ Vite เขาล้มเหลวในการประมวลผลพัสดุเก่าที่ไม่ได้รับการดูแล เรามีบางอย่างในแอพ และการแทนที่พวกมันไม่ใช่ตัวเลือก

ดังนั้นวิธีแก้ปัญหาคือแทนที่เนื้อหาของแพ็คเกจด้วยเนื้อหาที่แตกต่างกันระหว่างการสร้าง

ในการทำเช่นนี้ ฉันใช้ plugin vite-plugin-resolveที่ให้คุณระบุชื่อแพ็คเกจและจำลองชื่อนั้นกับเนื้อหาอื่นๆ ในกรณีของฉัน แพ็คเกจที่ฉันต้องการแก้ไขไม่ได้ใช้ในโฟลว์ส่วนใหญ่ของ UI ดังนั้นฉันจึงแทนที่ด้วยเนื้อหาว่าง

ตัวอย่างเช่น เราใช้แพ็คเกจชื่อreact-codemirror2ที่ส่งออกส่วนประกอบชื่อUnControlled. ฉันเพิ่งแทนที่เนื้อหาด้วยวัตถุเปล่าและสิ่งนี้ช่วยแก้ปัญหาเกี่ยวกับแพ็คเกจนี้

plugins: [
    ...
    resolve({ "react-codemirror2": `
        const UnControlled = {};
        export {
          UnControlled,
        }`
    }
]

นอกจากนี้ ในกรณีนี้ วิธีแก้ไขคือการใช้ plugin vite-plugin-requireที่จะแก้ปัญหาได้

เคล็ดลับ: เป็นการดีกว่าที่จะระบุชื่อโดยละเอียดของส่วนประกอบที่ใช้requireการนำเข้า

ตัวอย่างเช่น: กำหนดค่าปลั๊กอินเพื่อประมวลผลCostViewerDialog.tsxไฟล์เท่านั้น

plugins: [
    ...
    vitePluginRequire({fileRegex: /(CostViewerDialog.tsx)$/}),
]

Vite มีการสนับสนุนเนทีฟสำหรับนามแฝงการนำเข้า

ตัวอย่างเช่น กำหนดนามแฝงสำหรับเส้นทาง./src/Componentsเป็นComponents

resolve: {
    alias: {     
        Components: path.resolve(__dirname, "./src/Components"),
    }, 
},

Vite มีการสนับสนุนแบบเนทีฟสำหรับการกำหนดการตั้งค่าพร็อกซี

ตัวอย่างเช่น เปลี่ยนเส้นทางการเรียกเซิร์ฟเวอร์ภายในทั้งหมดไปยังพอร์ต8090

server: {
  port: 3000,
  proxy: {
    "^/api/v1/.*": "http://localhost:8090",
  },
},

หากต้องการแก้ไขข้อบกพร่อง ให้เพิ่มการตั้งค่าต่อไปนี้ลงในvite.config.jsไฟล์

esbuild: {
  sourcemap: true,
},

ผล

ผลลัพธ์ที่ได้นั้นน่าทึ่งมาก!

สรุป

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