แสดงโค้ดที่ทันสมัยในเบราว์เซอร์รุ่นใหม่เพื่อให้โหลดหน้าเว็บได้เร็วขึ้น

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

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

วัดระยะทาง

คุณควรเริ่มต้นด้วยการตรวจสอบเว็บไซต์ก่อนที่จะเพิ่มการเพิ่มประสิทธิภาพใดๆ ดังนี้

1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ
2. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
3. คลิกแท็บเครือข่าย
4. เลือกช่องทำเครื่องหมายปิดใช้แคช
5. โหลดแอปซ้ำ

แอปพลิเคชันนี้มีขนาดมากกว่า 80 KB มาดูกันว่าไม่มีการใช้ส่วนต่างๆ ในแพ็กเกจหรือไม่

1. กด Control+Shift+P (หรือ Command+Shift+P ใน Mac) เพื่อเปิดเมนู Command

2. ป้อน Show Coverage แล้วกด Enter เพื่อแสดงแท็บการครอบคลุม

3. ในแท็บการครอบคลุม ให้คลิกโหลดซ้ำเพื่อโหลดแอปพลิเคชันซ้ำขณะบันทึกการครอบคลุม

   

4. ดูจำนวนโค้ดที่ใช้ไปและจำนวนเงินที่โหลดสำหรับแพ็กเกจหลัก

   

ข้อมูลมากกว่าครึ่งชุด (44 KB) ยังไม่ได้ใช้ประโยชน์ เนื่องจากโค้ดจำนวนมากภายในโค้ดประกอบด้วย Polyfill เพื่อให้แน่ใจว่าแอปพลิเคชันจะทำงานได้ในเบราว์เซอร์รุ่นเก่า

ใช้ @babel/preset-env

ไวยากรณ์ของภาษา JavaScript เป็นไปตามมาตรฐานที่เรียกว่า ECMAScript หรือ ECMA-262 เราเปิดตัวข้อกำหนดเวอร์ชันใหม่ๆ ทุกปี และมีฟีเจอร์ใหม่ๆ ที่ผ่านขั้นตอนการขอข้อเสนอแล้ว เบราว์เซอร์หลักแต่ละเบราว์เซอร์จะมีการรองรับคุณลักษณะ เหล่านี้ในขั้นตอนที่ต่างกันเสมอ

มีการใช้ฟีเจอร์ ES2015 ต่อไปนี้ในแอปพลิเคชัน

• ฟังก์ชันลูกศร
• ลิเทอรัลของเทมเพลต
• สำหรับ...ของลูป
• การทำลายการกำหนด

มีการใช้ฟีเจอร์ ES2017 ต่อไปนี้ด้วย

• ฟังก์ชันไม่พร้อมกัน

ลองเจาะลึกซอร์สโค้ดใน src/index.js เพื่อดูว่ามีการใช้ข้อมูลทั้งหมดนี้อย่างไร

คุณลักษณะเหล่านี้ทั้งหมดได้รับการรองรับใน Chrome เวอร์ชันล่าสุด แล้วเบราว์เซอร์อื่นๆ ที่ไม่รองรับคุณลักษณะเหล่านี้จะเป็นอย่างไร Babel ซึ่งรวมอยู่ในแอปพลิเคชันเป็นไลบรารีที่ได้รับความนิยมสูงสุดเพื่อคอมไพล์โค้ดที่มีไวยากรณ์ใหม่เป็นโค้ดที่เบราว์เซอร์และสภาพแวดล้อมเก่าๆ สามารถ เข้าใจได้ ซึ่งทำได้ 2 วิธีดังนี้

• Polyfills มีไว้เพื่อจำลองฟังก์ชัน ES2015+ ที่ใหม่กว่าเพื่อให้ใช้ API ได้แม้ว่าเบราว์เซอร์จะไม่รองรับก็ตาม ต่อไปนี้คือตัวอย่างของ polyfill ของเมธอด Array.includes
• ปลั๊กอินใช้เพื่อเปลี่ยนรูปแบบโค้ด ES2015 (หรือใหม่กว่า) เป็นไวยากรณ์ ES5 ที่เก่ากว่า เนื่องจากการเปลี่ยนแปลงเหล่านี้เกี่ยวข้องกับไวยากรณ์ (เช่น ฟังก์ชันลูกศร) จึงไม่สามารถจำลองด้วย Polyfill ได้

ดู package.json เพื่อดูว่ามีห้องสมุด Babel ใดบ้าง

"dependencies": {
  "@babel/polyfill": "^7.0.0"
},
"devDependencies": {
  //...
  "babel-loader": "^8.0.2",
  "@babel/core": "^7.1.0",
  "@babel/preset-env": "^7.1.0",
  //...
}

• @babel/core เป็นคอมไพเลอร์หลักของ Babel ด้วยเหตุนี้ การกำหนดค่า Babel ทั้งหมดจึงกำหนดไว้ใน .babelrc ที่รูทของโปรเจ็กต์
• babel-loader รวม Babel ไว้ในกระบวนการบิลด์ Webpack

ตอนนี้ให้ดูที่ webpack.config.js เพื่อดูวิธีรวม babel-loader เป็นกฎ ดังนี้

module: {
  rules: [
    //...
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader"
    }
  ]
},

• @babel/polyfill มีโพลีฟิลล์ที่จำเป็นสำหรับฟีเจอร์ใหม่ๆ ของ ECMAScript เพื่อให้ทำงานในสภาพแวดล้อมที่ไม่รองรับได้ มีการนำเข้าที่บนสุดของ src/index.js. แล้ว

import "./style.css";
import "@babel/polyfill";

• @babel/preset-env ระบุว่าการแปลงและ Polyfill ใดที่จำเป็นสำหรับเบราว์เซอร์หรือสภาพแวดล้อมที่เลือกเป็นเป้าหมาย

ดูไฟล์การกำหนดค่า Babel .babelrc เพื่อดูวิธีรวมไฟล์ดังกล่าว:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions"
      }
    ]
  ]
}

นี่คือการตั้งค่า Babel และ Webpack ดูวิธีรวม Babel ในแอปพลิเคชันของคุณหากคุณใช้ Bundler โมดูลที่แตกต่างจาก Webpack

แอตทริบิวต์ targets ใน .babelrc ระบุว่าเบราว์เซอร์ใดที่กำลังกำหนดเป้าหมาย @babel/preset-env จะผสานรวมกับรายการเบราว์เซอร์ ซึ่งหมายความว่าคุณจะดูรายการคำค้นหาทั้งหมดที่เข้ากันได้ซึ่งใช้ในช่องนี้ได้ในเอกสารประกอบของรายการเบราว์เซอร์

ค่า "last 2 versions" จะเปลี่ยนรูปแบบโค้ดในแอปพลิเคชันสำหรับ 2 เวอร์ชันล่าสุดของทุกๆ เบราว์เซอร์

การแก้ไขข้อบกพร่อง

หากต้องการดูเป้าหมาย Babel ทั้งหมดของเบราว์เซอร์ ตลอดจนการเปลี่ยนรูปแบบและ Polyfill ทั้งหมดที่รวมอยู่ ให้เพิ่มช่อง debug ลงใน .babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions",
        "debug": true
      }
    ]
  ]
}

• คลิกเครื่องมือ
• คลิกบันทึก

โหลดแอปพลิเคชันซ้ำและดูบันทึกสถานะ Glitch ที่ด้านล่างของเครื่องมือแก้ไข

เบราว์เซอร์เป้าหมาย

Babel บันทึกรายละเอียดจำนวนหนึ่งเกี่ยวกับกระบวนการคอมไพล์ ซึ่งรวมถึงสภาพแวดล้อมเป้าหมายทั้งหมดที่มีการรวบรวมโค้ดไว้

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

นอกจากนี้ Babel ยังบันทึกรายการปลั๊กอิน Transform ที่ใช้ด้วย

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

อย่างไรก็ตาม Babel จะไม่แสดงโพลีฟิลล์ที่ใช้ดังต่อไปนี้

เนื่องจากระบบนำเข้า @babel/polyfill ทั้งหมดโดยตรง

โหลด Polyfill ทีละรายการ

โดยค่าเริ่มต้น Babel จะมี Polyfill ทุกรายการที่จำเป็นสำหรับสภาพแวดล้อม ES2015+ ที่สมบูรณ์เมื่อนำเข้า @babel/polyfill ไปยังไฟล์ หากต้องการนำเข้าโพลีฟิลล์เฉพาะที่จำเป็นสำหรับเบราว์เซอร์เป้าหมาย ให้เพิ่ม useBuiltIns: 'entry' ลงในการกำหนดค่า

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions",
        "debug": true
        "useBuiltIns": "entry"
      }
    ]
  ]
}

โหลดแอปพลิเคชันซ้ำ ตอนนี้คุณจะเห็น Polyfill ทั้งหมดที่รวมอยู่ในรายการต่อไปนี้

แม้ว่าตอนนี้จะรวมโพลีฟิลล์ที่จำเป็นสำหรับ "last 2 versions" เท่านั้น แต่ก็ยังถือว่าเป็นรายการที่ยาวมาก ทั้งนี้เนื่องจากยังคงมี Polyfill ที่จำเป็นสำหรับเบราว์เซอร์เป้าหมายสำหรับฟีเจอร์ใหม่ทั้งหมดรวมอยู่ด้วย เปลี่ยนค่าของแอตทริบิวต์เป็น usage เพื่อรวมเฉพาะค่าที่จำเป็นสำหรับฟีเจอร์ที่ใช้ในโค้ด

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions",
        "debug": true,
        "useBuiltIns": "entry"
        "useBuiltIns": "usage"
      }
    ]
  ]
}

โพลีฟิลล์จะรวมอยู่ด้วยโดยอัตโนมัติเมื่อจำเป็น ซึ่งหมายความว่าคุณสามารถนำการนำเข้า @babel/polyfill ใน src/index.js. ออกได้

import "./style.css";
import "@babel/polyfill";

ตอนนี้ระบบจะรวมเฉพาะ Polyfill ที่จำเป็นสำหรับแอปพลิเคชันเท่านั้น

ขนาดของชุดแอปพลิเคชันจะลดลงอย่างมาก

จำกัดรายการเบราว์เซอร์ที่รองรับให้แคบลง

จำนวนเป้าหมายของเบราว์เซอร์ที่รวมอยู่ยังคงค่อนข้างมาก และไม่มีผู้ใช้เบราว์เซอร์ที่เลิกใช้แล้ว เช่น Internet Explorer อัปเดตการกำหนดค่าเป็น

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions",
        "targets": [">0.25%", "not ie 11"],
        "debug": true,
        "useBuiltIns": "usage",
      }
    ]
  ]
}

ดูรายละเอียดของชุดข้อมูลที่ดึงข้อมูลมา

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

ใช้ <script type="module">

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

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

// math.mjs
export const add = (x, y) => x + y;

<!-- index.html -->
<script type="module">
  import { add } from './math.mjs';

  add(5, 2); // 7
</script>

ฟีเจอร์ใหม่ๆ มากมายของ ECMAScript ได้รับการรองรับอยู่แล้วในสภาพแวดล้อม ที่รองรับโมดูล JavaScript (แทนที่จะต้องใช้ Babel) ซึ่งหมายความว่าคุณจะแก้ไขการกำหนดค่า Babel ให้ส่งแอปพลิเคชัน 2 เวอร์ชันไปยังเบราว์เซอร์ได้ ดังนี้

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

การใช้โมดูล ES กับ Babel

หากต้องการมีการตั้งค่า @babel/preset-env แยกต่างหากสำหรับแอปพลิเคชัน 2 เวอร์ชัน ให้นำไฟล์ .babelrc ออก คุณเพิ่มการตั้งค่า Babel ลงในการกำหนดค่า Webpack ได้โดยระบุรูปแบบการคอมไพล์ที่ต่างกัน 2 รูปแบบสำหรับแอปพลิเคชันแต่ละเวอร์ชัน

เริ่มต้นโดยการเพิ่มการกำหนดค่าสำหรับสคริปต์เดิมใน webpack.config.js ดังนี้

const legacyConfig = {
  entry,
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            ["@babel/preset-env", {
              useBuiltIns: "usage",
              targets: {
                esmodules: false
              }
            }]
          ]
        }
      },
      cssRule
    ]
  },
  plugins
}

โปรดสังเกตว่าแทนที่จะใช้ค่า targets สำหรับ "@babel/preset-env" ระบบจะใช้ esmodules ที่มีค่า false แทน ซึ่งหมายความว่า Babel มีการแปลงและ Polyfill ที่จำเป็นครบถ้วนเพื่อกำหนดเป้าหมายทุกเบราว์เซอร์ที่ยังไม่รองรับโมดูล ES

เพิ่มออบเจ็กต์ entry, cssRule และ corePlugins ไว้ที่ตอนต้นของไฟล์ webpack.config.js สคริปต์เหล่านี้จะแชร์กันระหว่างโมดูลและสคริปต์เดิมที่แสดงในเบราว์เซอร์

const entry = {
  main: "./src"
};

const cssRule = {
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: "css-loader"
  })
};

const plugins = [
  new ExtractTextPlugin({filename: "[name].css", allChunks: true}),
  new HtmlWebpackPlugin({template: "./src/index.html"})
];

ในทำนองเดียวกัน ให้สร้างออบเจ็กต์การกำหนดค่าสำหรับสคริปต์โมดูลด้านล่างซึ่งกำหนด legacyConfig ไว้

const moduleConfig = {
  entry,
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "[name].mjs"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            ["@babel/preset-env", {
              useBuiltIns: "usage",
              targets: {
                esmodules: true
              }
            }]
          ]
        }
      },
      cssRule
    ]
  },
  plugins
}

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

ที่ส่วนท้ายสุดของไฟล์ ให้ส่งออกการกำหนดค่าทั้ง 2 รายการเป็นอาร์เรย์เดียว

module.exports = [
  legacyConfig, moduleConfig
];

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

เบราว์เซอร์ที่รองรับโมดูลจะไม่สนใจสคริปต์ที่มีแอตทริบิวต์ nomodule ในทางกลับกัน เบราว์เซอร์ที่ไม่รองรับโมดูลจะไม่สนใจองค์ประกอบสคริปต์ที่มี type="module" ซึ่งหมายความว่าคุณสามารถรวมโมดูลและชุดสำรองที่คอมไพล์แล้วได้ ตามหลักการแล้ว แอปพลิเคชันทั้ง 2 เวอร์ชันควรอยู่ในรูปแบบ index.html ดังนี้

<script type="module" src="main.mjs"></script>
<script nomodule src="main.bundle.js"></script>

เบราว์เซอร์ที่รองรับการดึงข้อมูลโมดูลและเรียกใช้ main.mjs แต่ไม่ต้องสนใจ main.bundle.js. เบราว์เซอร์ที่ไม่รองรับโมดูลจะทำตรงกันข้าม

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

<script type="module" src="main.mjs"></script>
<script nomodule src="main.bundle.js" defer></script>

สิ่งสุดท้ายที่ต้องทำที่นี่คือการเพิ่มแอตทริบิวต์ module และ nomodule ลงในโมดูลและสคริปต์เดิมตามลำดับ จากนั้นนำเข้า ScriptExtHtmlWebpackPlugin ที่ด้านบนสุดของ webpack.config.js

const path = require("path");

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");

จากนั้นอัปเดตอาร์เรย์ plugins ในการกำหนดค่าให้รวมปลั๊กอินนี้

const plugins = [
  new ExtractTextPlugin({filename: "[name].css", allChunks: true}),
  new HtmlWebpackPlugin({template: "./src/index.html"}),
  new ScriptExtHtmlWebpackPlugin({
    module: /\.mjs$/,
    custom: [
      {
        test: /\.js$/,
        attribute: 'nomodule',
        value: ''
    },
    ]
  })
];

การตั้งค่าปลั๊กอินเหล่านี้เพิ่มแอตทริบิวต์ type="module" สำหรับองค์ประกอบสคริปต์ .mjs ทั้งหมด รวมถึงแอตทริบิวต์ nomodule สำหรับโมดูลสคริปต์ทั้งหมด .js

การแสดงโมดูลในเอกสาร HTML

สิ่งสุดท้ายที่ต้องทำคือเอาต์พุตทั้งองค์ประกอบสคริปต์แบบเดิมและสมัยใหม่ไปยังไฟล์ HTML อย่างไรก็ตาม ปลั๊กอินที่สร้างไฟล์ HTML สุดท้าย HTMLWebpackPlugin นั้นไม่รองรับเอาต์พุตของทั้งสคริปต์โมดูลและสคริปต์ nomodule แม้ว่าจะมีวิธีแก้ปัญหาเฉพาะหน้าและปลั๊กอินแยกต่างหากที่สร้างขึ้นเพื่อแก้ปัญหานี้ เช่น BabelMultiTargetPlugin และ HTMLWebpackMultiBuildPlugin แต่ก็ใช้วิธีการที่ง่ายกว่าในการเพิ่มองค์ประกอบสคริปต์โมดูลด้วยตนเองสำหรับวัตถุประสงค์ของบทแนะนำนี้

เพิ่มโค้ดต่อไปนี้ใน src/index.js ที่ท้ายไฟล์

    ...
    </form>
    <script type="module" src="main.mjs"></script>
  </body>
</html>

ตอนนี้ ให้โหลดแอปพลิเคชันในเบราว์เซอร์ที่สนับสนุนโมดูล เช่น Chrome เวอร์ชันล่าสุด

ระบบจะดึงข้อมูลเฉพาะโมดูลเท่านั้น โดย Bundle มีขนาดเล็กลงมากเพราะระบบไม่ได้แปลงข้อมูลเป็นส่วนมาก เบราว์เซอร์จะไม่สนใจองค์ประกอบอื่นของสคริปต์โดยสิ้นเชิง

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

บทสรุป

ตอนนี้คุณก็เข้าใจวิธีใช้ @babel/preset-env เพื่อจัดหาเฉพาะ Polyfill ที่จำเป็นสำหรับเบราว์เซอร์เป้าหมายแล้ว และคุณยังได้รู้วิธีที่โมดูล JavaScript สามารถปรับปรุงประสิทธิภาพให้ดีขึ้นได้โดยการส่งแอปพลิเคชันเวอร์ชันเปลี่ยนรูปแบบที่แตกต่างกัน 2 เวอร์ชัน ความเข้าใจอย่างถ่องแท้ว่าทั้ง 2 เทคนิคนี้ช่วยลดขนาดกลุ่มลงได้อย่างมากได้อย่างไร จึงเดินหน้าเพิ่มประสิทธิภาพได้เลย