หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Houssein Djirdeh

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

ภาพหน้าจอแอป

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

วัดระยะทาง

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

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

คำขอขนาด App Bundle เดิม

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

กด Control+Shift+P (หรือ Command+Shift+P ใน Mac) เพื่อเปิดเมนู Command
ป้อน Show Coverage แล้วกด Enter เพื่อแสดงแท็บความครอบคลุม
ในแท็บการครอบคลุม ให้คลิกโหลดซ้ำเพื่อโหลดแอปพลิเคชันอีกครั้งขณะจับภาพการครอบคลุม
ลองดูจำนวนโค้ดที่ใช้เทียบกับจำนวนการโหลดสำหรับแพ็กเกจหลัก ดังนี้

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

ใช้ @babel/preset-env

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

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

ระบบจะใช้ฟีเจอร์ ES2017 ต่อไปนี้ด้วย

ฟังก์ชันที่ทำงานพร้อมกัน

คุณสามารถดูซอร์สโค้ดใน src/index.js เพื่อดูวิธีใช้ฟีเจอร์เหล่านี้

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

Polyfill จะรวมอยู่ด้วยเพื่อจําลองฟังก์ชัน 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 มี Polyfill ที่จำเป็นทั้งหมดสำหรับฟีเจอร์ ECMAScript เวอร์ชันใหม่เพื่อให้ทำงานได้ในสภาพแวดล้อมที่ไม่รองรับ นำเข้าไว้ที่ตำแหน่งบนสุดของ src/index.js. แล้ว

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

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

ลองดูไฟล์การกำหนดค่า Babel ชื่อ .babelrc ว่ามีการรวมไฟล์ดังกล่าวไว้อย่างไร

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

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

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

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

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

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

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

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

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

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

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

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

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

นอกจากนี้ Babel จะบันทึกรายการปลั๊กอินการเปลี่ยนรูปแบบที่ใช้ด้วย

รายการปลั๊กอินที่ใช้

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

อย่างไรก็ตาม Babel จะไม่แสดง polyfill ที่เฉพาะเจาะจงที่ใช้

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

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

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

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

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

รายการ polyfill ที่นําเข้า

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

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

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

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

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

รายการ Polyfill ที่รวมไว้โดยอัตโนมัติ

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

ขนาด Bundle ลดลงเหลือ 30.1 KB

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

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

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

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

ขนาด Bundle 30.0 KB

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

ใช้ <script type="module">

แต่เรายังต้องปรับปรุงอีก แม้ว่าจะมีการนํา polyfill ที่ไม่ได้ใช้ออกแล้ว แต่ยังมี 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>

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

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

การใช้ ES Modules กับ 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 จะรวมการเปลี่ยนรูปแบบและโพลีฟีลที่จำเป็นทั้งหมดเพื่อกำหนดเป้าหมายไปยังเบราว์เซอร์ทุกรุ่นที่ยังไม่รองรับโมดูล 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"})
];

ตอนนี้ให้สร้างออบเจ็กต์ config ในทำนองเดียวกันสำหรับสคริปต์โมดูลด้านล่างที่กําหนด 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 ทั้งหมด

หมายเหตุ: หากไม่เข้าใจวิธีเพิ่มการกําหนดค่าทั้งหมดเหล่านี้ลงใน webpack.config.js โปรดดูไฟล์เวอร์ชันสมบูรณ์

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

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

เพิ่มข้อมูลต่อไปนี้ลงใน src/index.js ที่ส่วนท้ายของไฟล์

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

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

โมดูลขนาด 5.2 KB ที่ดึงข้อมูลผ่านเครือข่ายสําหรับเบราว์เซอร์รุ่นใหม่

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

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

สคริปต์ขนาด 30 KB ที่ดึงข้อมูลสําหรับเบราว์เซอร์รุ่นเก่า

บทสรุป

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