เครื่องมือสร้าง JavaScript: การกำหนดค่า Webpack และการเพิ่มประสิทธิภาพ Bundle

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

Webpack คืออะไร?

โดยพื้นฐานแล้ว Webpack คือ static module bundler สำหรับแอปพลิเคชัน JavaScript สมัยใหม่ มันจะรวบรวมโมดูลที่มี dependency ต่างๆ และสร้าง static assets ที่แทนโมดูลเหล่านั้น ลองนึกภาพสถานการณ์ที่คุณมีไฟล์ JavaScript, ไฟล์ CSS, รูปภาพ และ assets อื่นๆ หลายสิบหรือหลายร้อยไฟล์ที่ต้องรวมกันและส่งไปยังเบราว์เซอร์ Webpack ทำหน้าที่เป็นศูนย์กลางในการวิเคราะห์ dependency ของโปรเจกต์ของคุณและจัดแพ็กเกจเป็น bundle ที่ปรับให้เหมาะสมแล้ว ซึ่งสามารถให้บริการแก่ผู้ใช้ทั่วโลกได้อย่างมีประสิทธิภาพ

ฟังก์ชันหลักของมันประกอบด้วย:

• การรวมโมดูล (Module Bundling): รวมไฟล์ JavaScript หลายไฟล์ (โมดูล) และ dependency ของไฟล์เหล่านั้นให้เป็น bundle เดียวหรือหลาย bundle
• การแปลงโค้ด (Code Transformation): ใช้ loader เพื่อแปลงไฟล์ประเภทต่างๆ (เช่น ES6, TypeScript, Sass, รูปภาพ) ให้อยู่ในรูปแบบที่เบราว์เซอร์เข้ากันได้
• การเพิ่มประสิทธิภาพ (Optimization): เพิ่มประสิทธิภาพของ bundle เพื่อประสิทธิภาพที่ดีขึ้นผ่านเทคนิคต่างๆ เช่น การย่อขนาด (minification), การแบ่งโค้ด (code splitting) และ tree shaking
• ระบบนิเวศของปลั๊กอิน (Plugin Ecosystem): มีระบบนิเวศของปลั๊กอินที่หลากหลายซึ่งขยายฟังก์ชันการทำงานเพื่อจัดการงานต่างๆ เช่น การวิเคราะห์โค้ด การจัดการ assets และการ deploy

ตัวอย่างเช่น ทีมในบังกาลอร์อาจใช้ Webpack เพื่อแปลงโค้ด ES6 ของพวกเขาเป็น ES5 เพื่อให้แน่ใจว่าสามารถทำงานร่วมกับเบราว์เซอร์รุ่นเก่าที่ใช้ในส่วนต่างๆ ของอินเดียได้ ในทำนองเดียวกัน นักพัฒนาในเบอร์ลินอาจใช้ Webpack เพื่อปรับขนาดรูปภาพให้เหมาะสมกับขนาดหน้าจอต่างๆ เพื่อรองรับฐานผู้ใช้ที่หลากหลายซึ่งมีความเร็วอินเทอร์เน็ตที่แตกต่างกัน

การตั้งค่า Webpack: คู่มือทีละขั้นตอน

ก่อนที่จะเข้าสู่การกำหนดค่าขั้นสูง เรามาดูขั้นตอนพื้นฐานสำหรับการตั้งค่า Webpack ในโปรเจกต์ใหม่กันก่อน

1. การเริ่มต้นโปรเจกต์

สร้างไดเรกทอรีโปรเจกต์ใหม่และเริ่มต้นด้วย npm หรือ yarn:

            mkdir my-webpack-project
cd my-webpack-project
npm init -y  # Or yarn init -y
            

              
                Copy
              
            
          

2. การติดตั้ง Webpack

ติดตั้ง Webpack และ Webpack CLI เป็น development dependencies:

            npm install webpack webpack-cli --save-dev # Or yarn add webpack webpack-cli -D
            

              
                Copy
              
            
          

3. การสร้างไฟล์กำหนดค่า Webpack (webpack.config.js)

สร้างไฟล์ชื่อ `webpack.config.js` ใน root ของโปรเจกต์ของคุณ ไฟล์นี้จะเก็บตัวเลือกการกำหนดค่าทั้งหมดสำหรับ Webpack

            // webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development', // or 'production' or 'none'
};

            

              
                Copy
              
            
          

นี่คือคำอธิบายของตัวเลือกที่สำคัญ:

• entry: ระบุจุดเริ่มต้นของแอปพลิเคชันของคุณ Webpack จะเริ่มการรวมไฟล์จากไฟล์นี้ ในตัวอย่างนี้ `./src/index.js` คือจุดเริ่มต้น
• output: กำหนดว่า Webpack ควรจะส่งออกไฟล์ที่รวมแล้วไปที่ไหน `filename` ระบุชื่อของไฟล์ที่รวมแล้ว และ `path` ระบุไดเรกทอรีผลลัพธ์ (ในกรณีนี้คือไดเรกทอรีชื่อ `dist`)
• mode: ตั้งค่าโหมดการ build `development` จะเปิดใช้งานฟีเจอร์สำหรับการพัฒนา ในขณะที่ `production` จะเพิ่มประสิทธิภาพ bundle สำหรับการ deploy (เช่น การย่อขนาด) `none` จะทำการรวมโค้ดของคุณโดยไม่มีการเพิ่มประสิทธิภาพใดๆ

4. การรัน Webpack

เพิ่ม script ไปยังไฟล์ `package.json` ของคุณเพื่อรัน Webpack:

            // package.json

{
  "scripts": {
    "build": "webpack"
  }
}

            

              
                Copy
              
            
          

ตอนนี้ คุณสามารถรัน Webpack จาก terminal ของคุณได้:

            npm run build # Or yarn build
            

              
                Copy
              
            
          

คำสั่งนี้จะสร้างไดเรกทอรี `dist` (หากยังไม่มี) และสร้างไฟล์ `bundle.js` ที่มีโค้ด JavaScript ที่รวมแล้วของคุณ

ทำความเข้าใจตัวเลือกการกำหนดค่า Webpack

ไฟล์ `webpack.config.js` คือหัวใจของการตั้งค่า Webpack ของคุณ มันช่วยให้คุณสามารถปรับแต่งแง่มุมต่างๆ ของกระบวนการรวมไฟล์ได้ เรามาสำรวจตัวเลือกการกำหนดค่าที่สำคัญที่สุดบางส่วนกัน

Entry Points

ดังที่ได้กล่าวไปแล้ว ตัวเลือก `entry` จะระบุจุดเริ่มต้นสำหรับแอปพลิเคชันของคุณ คุณสามารถมี entry point ได้หลายจุด ซึ่งมีประโยชน์สำหรับการสร้าง bundle แยกสำหรับส่วนต่างๆ ของเว็บไซต์ของคุณ (เช่น bundle แยกสำหรับเว็บไซต์หลักและแผงควบคุมผู้ดูแลระบบ) ซึ่งสามารถปรับปรุงเวลาในการโหลดเริ่มต้นได้ เนื่องจากจะมีการโหลดเฉพาะโค้ดที่จำเป็นสำหรับแต่ละหน้าเท่านั้น

            // webpack.config.js

module.exports = {
  entry: {
    main: './src/index.js',
    admin: './src/admin.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
};

            

              
                Copy
              
            
          

ในตัวอย่างนี้ เรามี entry point สองจุดคือ `main` และ `admin` Webpack จะสร้าง bundle แยกสองไฟล์คือ `main.bundle.js` และ `admin.bundle.js`

Output

ตัวเลือก `output` กำหนดว่า Webpack ควรจะส่งออกไฟล์ที่รวมแล้วไปที่ไหนและควรตั้งชื่ออย่างไร ตัวเลือกที่สำคัญประกอบด้วย:

• filename: ระบุชื่อของไฟล์ที่รวมแล้ว คุณสามารถใช้ placeholder เช่น `[name]` (ชื่อของ entry point), `[hash]` (แฮชที่ไม่ซ้ำกันที่สร้างขึ้นสำหรับการ build แต่ละครั้ง) และ `[chunkhash]` (แฮชที่อิงตามเนื้อหาของ chunk)
• path: ระบุไดเรกทอรีผลลัพธ์
• publicPath: ระบุ URL พื้นฐานสำหรับ asset ทั้งหมดในแอปพลิเคชันของคุณ สิ่งนี้มีประโยชน์เมื่อ deploy แอปพลิเคชันของคุณไปยังไดเรกทอรีย่อยหรือ CDN ตัวอย่างเช่น การตั้งค่า `publicPath` เป็น `/assets/` จะบอก Webpack ว่า asset ทั้งหมดจะถูกให้บริการจากไดเรกทอรี `/assets/` บนเซิร์ฟเวอร์ของคุณ

            // webpack.config.js

module.exports = {
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/assets/',
  },
};

            

              
                Copy
              
            
          

Loaders

Loaders คือการแปลงที่ใช้กับโมดูลแต่ละตัว ช่วยให้คุณสามารถประมวลผลไฟล์ประเภทต่างๆ (เช่น CSS, รูปภาพ, ฟอนต์) และแปลงให้เป็นโมดูล JavaScript ที่ถูกต้องได้ Loaders ทั่วไปประกอบด้วย:

• babel-loader: แปลงโค้ด ES6+ เป็น ES5 เพื่อให้เข้ากันได้กับเบราว์เซอร์
• css-loader: ตีความคำสั่ง `@import` และ `url()` ในไฟล์ CSS
• style-loader: แทรก CSS เข้าไปใน DOM โดยใช้แท็ก `