ลดขนาดส่วนหน้า

วิธีใช้ webpack เพื่อทำให้แอปมีขนาดเล็กที่สุด

Ivan Akulov

สิ่งแรกๆ ที่คุณควรทำเมื่อเพิ่มประสิทธิภาพแอปพลิเคชันคือการทำให้แอปพลิเคชันมีขนาดเล็กที่สุด วิธีดำเนินการด้วย webpack มีดังนี้

ใช้โหมดการผลิต (webpack 4 เท่านั้น)

Webpack 4 เปิดตัวFlag mode ใหม่ คุณสามารถตั้งค่า Flag นี้เป็น 'development' หรือ 'production' เพื่อบอก webpack ว่าคุณกําลังสร้างแอปพลิเคชันสําหรับสภาพแวดล้อมที่เฉพาะเจาะจง

// webpack.config.js
module.exports = {
  mode: 'production',
};

อย่าลืมเปิดใช้โหมด production เมื่อสร้างแอปสำหรับเวอร์ชันที่ใช้งานจริง ซึ่งจะทำให้ webpack ใช้การเพิ่มประสิทธิภาพ เช่น การทำให้ไฟล์เล็กลง การนำโค้ดสำหรับการพัฒนาเท่านั้นออกจากไลบรารี และอื่นๆ

อ่านเพิ่มเติม

เปิดใช้การย่อขนาด

การลดขนาดคือการบีบอัดโค้ดโดยการนําการเว้นวรรคส่วนเกินออก ย่อชื่อตัวแปรให้สั้นลง และอื่นๆ ดังนี้

// Original code
function map(array, iteratee) {
  let index = -1;
  const length = array == null ? 0 : array.length;
  const result = new Array(length);

  while (++index < length) {
    result[index] = iteratee(array[index], index, array);
  }
  return result;
}

↓

// Minified code
function map(n,r){let t=-1;for(const a=null==n?0:n.length,l=Array(a);++t<a;)l[t]=r(n[t],t,n);return l}

Webpack รองรับการย่อโค้ด 2 วิธี ได้แก่ การย่อระดับกลุ่ม และตัวเลือกเฉพาะตัวโหลด ควรใช้เครื่องมือเหล่านี้พร้อมกัน

การลดขนาดระดับ Bundle

การทำให้ไฟล์เล็กลงระดับแพ็กเกจจะบีบอัดทั้งแพ็กเกจหลังจากการคอมไพล์ โดยมีวิธีการทำงานดังนี้

  1. คุณเขียนโค้ดดังนี้

    // comments.js
import './comments.css';
export function render(data, target) {
  console.log('Rendered!');
}

  2. Webpack จะคอมไพล์เป็นไฟล์ประมาณดังนี้

    // bundle.js (part of)
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony export (immutable) */ __webpack_exports__["render"] = render;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css_js___default =
__webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__comments_css__);

function render(data, target) {
console.log('Rendered!');
}

  3. เครื่องมือบีบอัดจะบีบอัดไฟล์ให้มีขนาดประมาณดังนี้

    // minified bundle.js (part of)
"use strict";function t(e,n){console.log("Rendered!")}
Object.defineProperty(n,"__esModule",{value:!0}),n.render=t;var o=r(1);r.n(o)

ใน webpack 4 ระบบจะเปิดใช้การบีบอัดระดับแพ็กเกจโดยอัตโนมัติ ทั้งแบบมีและไม่มีโหมดการผลิต โดยจะใช้เครื่องมือบีบอัด UglifyJS อยู่เบื้องหลัง (หากต้องการปิดใช้การย่อขนาด ให้ใช้โหมดการพัฒนา หรือส่ง false ไปยังตัวเลือก optimization.minimize)

ใน webpack 3 คุณต้องใช้ปลั๊กอิน UglifyJSโดยตรง ปลั๊กอินนี้มาพร้อมกับ webpack หากต้องการเปิดใช้ ให้เพิ่มลงในplugins ส่วนของการกําหนดค่า ดังนี้

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
  ],
};

ตัวเลือกเฉพาะสำหรับโปรแกรมโหลด

วิธีที่สองในการย่อโค้ดคือตัวเลือกเฉพาะสำหรับโปรแกรมโหลด (ความหมายของโปรแกรมโหลด) ตัวเลือกโปรแกรมโหลดช่วยให้คุณบีบอัดสิ่งที่เครื่องมือลดขนาดไม่สามารถลดขนาดได้ ตัวอย่างเช่น เมื่อคุณนําเข้าไฟล์ CSS ด้วย css-loader ระบบจะคอมไพล์ไฟล์เป็นสตริง

/* comments.css */
.comment {
  color: black;
}

// minified bundle.js (part of)
exports=module.exports=__webpack_require__(1)(),
exports.push([module.i,".comment {\r\n  color: black;\r\n}",""]);

ตัวบีบอัดไม่สามารถบีบอัดโค้ดนี้เนื่องจากเป็นสตริง หากต้องการย่อขนาดเนื้อหาไฟล์ เราจำเป็นต้องกำหนดค่าโปรแกรมโหลดเพื่อดำเนินการดังนี้

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { minimize: true } },
        ],
      },
    ],
  },
};

อ่านเพิ่มเติม

ระบุ NODE_ENV=production

อีกวิธีในการลดขนาดของส่วนหน้าคือการกําหนดNODE_ENV ตัวแปรสภาพแวดล้อมในโค้ดเป็นค่า production

ไลบรารีจะอ่านตัวแปร NODE_ENV เพื่อตรวจหาว่าควรทํางานในโหมดใดระหว่างโหมดการพัฒนาหรือโหมดที่ใช้งานจริง ไลบรารีบางรายการจะทํางานแตกต่างกันไปตามตัวแปรนี้ ตัวอย่างเช่น เมื่อไม่ได้ตั้งค่า NODE_ENV เป็น production แล้ว Vue.js จะดำเนินการตรวจสอบเพิ่มเติมและแสดงคำเตือน ดังนี้

// vue/dist/vue.runtime.esm.js
// …
if (process.env.NODE_ENV !== 'production') {
  warn('props must be strings when using array syntax.');
}
// …

React ทํางานคล้ายกัน โดยจะโหลดบิลด์สำหรับนักพัฒนาซอฟต์แวร์ที่มีคำเตือนดังต่อไปนี้

// react/index.js
if (process.env.NODE_ENV === 'production') {