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

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

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

Ivan Akulov

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

ใช้โหมดเวอร์ชันที่ใช้งานจริง (webpack 4 เท่านั้น)

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

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

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

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

สิ่งที่เฉพาะเจาะจงที่แฟล็ก mode กำหนดค่า

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

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

// 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

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

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

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

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!');
}

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

// 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(),
  ],
};

หมายเหตุ: ใน webpack 3 ปลั๊กอิน UglifyJS จะคอมไพล์โค้ด ES2015 ขึ้นไป (ES6 ขึ้นไป) ไม่ได้ ซึ่งหมายความว่าหากโค้ดของคุณใช้คลาส ฟังก์ชันลูกศร หรือฟีเจอร์ภาษาใหม่อื่นๆ และคุณไม่ได้คอมไพล์เป็น ES5 ปลั๊กอินจะแสดงข้อผิดพลาด

หากต้องการคอมไพล์ไวยากรณ์ใหม่ ให้ใช้แพ็กเกจ uglifyjs-webpack-plugin นี่เป็นปลั๊กอินเดียวกับที่รวมอยู่ใน webpack แต่เป็นเวอร์ชันที่ใหม่กว่าและสามารถคอมไพล์โค้ด ES2015 ขึ้นไปได้

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

วิธีที่สองในการย่อโค้ดคือตัวเลือกเฉพาะสำหรับโปรแกรมโหลด (ความหมายของโปรแกรมโหลด) ตัวเลือกโปรแกรมโหลดช่วยให้คุณบีบอัดสิ่งที่เครื่องมือลดขนาดไม่สามารถลดขนาดได้ ตัวอย่างเช่น เมื่อคุณนําเข้าไฟล์ 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 } },
        ],
      },
    ],
  },
};

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

เอกสารของ UglifyJsPlugin
มินิไฟเออร์ยอดนิยมอื่นๆ ได้แก่ Babel Minify, Google Closure Compiler

ระบุ `NODE_ENV=production`

หมายเหตุ: ใช้ได้กับ webpack 3 เท่านั้น หากคุณใช้ webpack 4 กับโหมดเวอร์ชันที่ใช้งานจริง ระบบจะเปิดใช้การเพิ่มประสิทธิภาพ 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') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

// react/cjs/react.development.js
// …
warning$3(
    componentClass.getDefaultProps.isReactClassApproved,
    'getDefaultProps is only used on classic React.createClass ' +
    'definitions. Use a static property named `defaultProps` instead.'
);
// …

โดยปกติแล้ว การตรวจสอบและคำเตือนดังกล่าวไม่จำเป็นในเวอร์ชันที่ใช้งานจริง แต่ยังคงอยู่ในโค้ดและทำให้ขนาดของไลบรารีเพิ่มขึ้น ใน webpack 4 ให้นำออกโดยเพิ่มตัวเลือก optimization.nodeEnv: 'production' ดังนี้

// webpack.config.js (for webpack 4)
module.exports = {
  optimization: {
    nodeEnv: 'production',
    minimize: true,
  },
};

ใน webpack 3 ให้ใช้ DefinePlugin แทน

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

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.optimize.UglifyJsPlugin()
  ]
};

ทั้งตัวเลือก optimization.nodeEnv และ DefinePlugin ทํางานในลักษณะเดียวกัน นั่นคือจะแทนที่ process.env.NODE_ENV ทั้งหมดที่ปรากฏด้วยค่าที่ระบุ เมื่อใช้การกําหนดค่าจากด้านบน

Webpack จะแทนที่ process.env.NODE_ENV ทั้งหมดด้วย "production" ดังนี้

// vue/dist/vue.runtime.esm.js
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
} else if (process.env.NODE_ENV !== 'production') {
  warn('props must be strings when using array syntax.');
}

↓

// vue/dist/vue.runtime.esm.js
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
} else if ("production" !== 'production') {
  warn('props must be strings when using array syntax.');
}

จากนั้น เครื่องมือลดขนาดจะนำifสาขาทั้งหมดออก เนื่องจาก"production" !== 'production'เป็นเท็จเสมอ และปลั๊กอินเข้าใจว่าโค้ดภายในสาขาเหล่านี้จะไม่ทำงาน
```
// vue/dist/vue.runtime.esm.js
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
} else if ("production" !== 'production') {
  warn('props must be strings when using array syntax.');
}
```
↓
```
// vue/dist/vue.runtime.esm.js (without minification)
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
}
```

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

ความหมายของ "ตัวแปรสภาพแวดล้อม"
เอกสาร Webpack เกี่ยวกับ DefinePlugin EnvironmentPlugin

ใช้โมดูล ES

วิธีถัดไปในการลดขนาดหน้าเว็บคือการใช้โมดูล ES

เมื่อคุณใช้โมดูล ES webpack จะทํา Tree Shaking ได้ การแยกไฟล์ที่ไม่จำเป็นคือเมื่อเครื่องมือรวมไฟล์จะเรียกใช้ทั้งต้นไม้ของข้อกําหนด ตรวจสอบว่าใช้ข้อกําหนดใดบ้าง และนําข้อกําหนดที่ไม่ได้ใช้ออก ดังนั้น หากคุณใช้ไวยากรณ์โมดูล ES webpack จะกำจัดโค้ดที่ไม่ได้ใช้ได้ ดังนี้

คุณเขียนไฟล์ที่มีการส่งออกหลายรายการ แต่แอปใช้เพียงรายการเดียว

// comments.js
export const render = () => { return 'Rendered!'; };
export const commentRestEndpoint = '/rest/comments';

// index.js
import { render } from './comments.js';
render();

Webpack เข้าใจว่าไม่มีการใช้ commentRestEndpoint และไม่สร้างจุดส่งออกแยกต่างหากในแพ็กเกจ

// bundle.js (part that corresponds to comments.js)
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
const render = () => { return 'Rendered!'; };
/* harmony export (immutable) */ __webpack_exports__["a"] = render;

const commentRestEndpoint = '/rest/comments';
/* unused harmony export commentRestEndpoint */
})

เครื่องมือบีบอัดจะนำตัวแปรที่ไม่ได้ใช้ออก

// bundle.js (part that corresponds to comments.js)
(function(n,e){"use strict";var r=function(){return"Rendered!"};e.b=r})

ซึ่งจะใช้กับไลบรารีได้หากเขียนด้วยโมดูล ES

แต่คุณไม่จำเป็นต้องใช้เครื่องมือบีบอัดขนาดเล็กในตัวของ webpack (UglifyJsPlugin) เครื่องมือบีบอัดที่รองรับการนำโค้ดที่ตายแล้วออก (เช่น ปลั๊กอิน Babel Minify หรือปลั๊กอิน Google Closure Compiler) จะช่วยแก้ปัญหานี้ได้

คำเตือน: อย่าคอมไพล์โมดูล ES เป็นโมดูล CommonJS โดยไม่ได้ตั้งใจ หากคุณใช้ Babel กับ babel-preset-env หรือ babel-preset-es2015 ให้ตรวจสอบการตั้งค่าของค่าที่กำหนดล่วงหน้าเหล่านี้ โดยค่าเริ่มต้น เครื่องมือนี้จะแปลง import และ export ของ ES เป็น require และ module.exports ของ CommonJS ส่งตัวเลือก { modules: false } เพื่อปิดใช้ เช่นเดียวกับ TypeScript อย่าลืมตั้งค่า { "compilerOptions": { "module": "es2015" } } ใน tsconfig.json

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

"โมดูล ES6 อย่างละเอียด"
เอกสารประกอบของ Webpack เกี่ยวกับ Tree Shaking

ปรับขนาดภาพให้เหมาะสม

รูปภาพมีขนาดใหญ่มากกว่าครึ่งของหน้าเว็บ แม้ว่าจะไม่สำคัญเท่า JavaScript (เช่น ไม่บล็อกการแสดงผล) แต่ก็ยังกินแบนด์วิดท์ส่วนใหญ่ ใช้ url-loader, svg-url-loader และ image-webpack-loader เพื่อเพิ่มประสิทธิภาพใน webpack

url-loader แทรกไฟล์คงที่ขนาดเล็กลงในแอป หากไม่มีการกําหนดค่า ระบบจะนําไฟล์ที่ส่งมาวางไว้ข้างพวงมาลัยที่คอมไพล์แล้ว และแสดงผล URL ของไฟล์นั้น อย่างไรก็ตาม หากเราระบุตัวเลือก limit ระบบจะเข้ารหัสไฟล์ที่มีขนาดเล็กกว่าขีดจำกัดนี้เป็น URL ข้อมูล Base64 และแสดงผล URL นี้ การดำเนินการนี้จะฝังรูปภาพไว้ในโค้ด JavaScript และบันทึกคําขอ HTTP

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif)$/,
        loader: 'url-loader',
        options: {
          // Inline files smaller than 10 kB (10240 bytes)
          limit: 10 * 1024,
        },
      },
    ],
  }
};

// index.js
import imageUrl from './image.png';
// → If image.png is smaller than 10 kB, `imageUrl` will include
// the encoded image: 'data:image/png;base64,iVBORw0KGg…'
// → If image.png is larger than 10 kB, the loader will create a new file,
// and `imageUrl` will include its url: `/2fcd56a1920be.png`

หมายเหตุ: รูปภาพในหน้าจะลดจํานวนคําขอแยกต่างหาก ซึ่งเป็นสิ่งที่ดี (แม้ว่าจะใช้ HTTP/2 ก็ตาม) แต่ก็จะเพิ่มเวลาในการดาวน์โหลด/แยกวิเคราะห์ของกลุ่มและการใช้หน่วยความจํา โปรดอย่าฝังรูปภาพขนาดใหญ่หรือฝังรูปภาพจำนวนมาก มิเช่นนั้นเวลาในการรวมจะเพิ่มขึ้นมากกว่าประโยชน์ของการฝังในบรรทัด

svg-url-loader ทำงานเหมือนกับ url-loader ยกเว้นว่าจะเข้ารหัสไฟล์ด้วยการเข้ารหัส URL แทนการเข้ารหัส Base64 ซึ่งมีประโยชน์สำหรับรูปภาพ SVG เนื่องจากไฟล์ SVG เป็นข้อความธรรมดา การเข้ารหัสนี้จึงมีประสิทธิภาพด้านขนาดมากกว่า

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: "svg-url-loader",
        options: {
          limit: 10 * 1024,
          noquotes: true
        }
      }
    ]
  }
};

image-webpack-loader จะบีบอัดรูปภาพที่ส่งผ่าน ซึ่งรองรับรูปภาพ JPG, PNG, GIF และ SVG เราจึงจะใช้เครื่องมือนี้กับรูปภาพทุกประเภท

โปรแกรมโหลดนี้ไม่ได้ฝังรูปภาพลงในแอป จึงต้องทำงานร่วมกับ url-loader และ svg-url-loader เพื่อหลีกเลี่ยงการคัดลอกและวางลงในทั้ง 2 กฎ (กฎแรกสำหรับรูปภาพ JPG/PNG/GIF และอีกกฎหนึ่งสำหรับรูปภาพ SVG) เราจะรวมโปรแกรมโหลดนี้ไว้ในกฎแยกต่างหากด้วย enforce: 'pre' ดังนี้

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'image-webpack-loader',
        // This will apply the loader before the other ones
        enforce: 'pre'
      }
    ]
  }
};

การตั้งค่าเริ่มต้นของโปรแกรมโหลดพร้อมใช้งานแล้ว แต่หากต้องการกําหนดค่าเพิ่มเติม โปรดดูตัวเลือกปลั๊กอิน หากต้องการเลือกตัวเลือกที่จะระบุ โปรดดูคําแนะนําที่ยอดเยี่ยมเกี่ยวกับการเพิ่มประสิทธิภาพรูปภาพของ Addy Osmani

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

เพิ่มประสิทธิภาพทรัพยากร Dependency

มากกว่าครึ่งหนึ่งของขนาด JavaScript เฉลี่ยมาจาก Dependency และขนาดส่วนหนึ่งอาจไม่จำเป็น

เช่น Lodash (เวอร์ชัน 4.17.4) จะเพิ่มโค้ดที่ผ่านการย่อขนาด 72 KB ลงในแพ็กเกจ แต่หากคุณใช้เมธอดเพียง 20 รายการ โค้ดที่ผ่านการย่อขนาดประมาณ 65 KB จะไม่มีประโยชน์ใดๆ

อีกตัวอย่างหนึ่งคือ Moment.js เวอร์ชัน 2.19.1 ใช้โค้ดที่ผ่านการย่อขนาด 223 KB ซึ่งถือว่ามากทีเดียว ขนาดเฉลี่ยของ JavaScript ในหน้าเว็บคือ 452 KB ในเดือนตุลาคม 2017 อย่างไรก็ตาม 170 KB ของขนาดดังกล่าวเป็นไฟล์แปลภาษา หากคุณไม่ได้ใช้ Moment.js กับหลายภาษา ไฟล์เหล่านี้จะทำให้แพ็กเกจมีขนาดใหญ่ขึ้นโดยไม่มีประโยชน์

คุณสามารถเพิ่มประสิทธิภาพของ Dependency ทั้งหมดเหล่านี้ได้อย่างง่ายดาย เราได้รวบรวมแนวทางการเพิ่มประสิทธิภาพไว้ในที่เก็บ GitHub แล้ว โปรดดู

เปิดใช้การต่อโมดูลสําหรับโมดูล ES (หรือที่เรียกว่าการยกระดับขอบเขต)

เมื่อคุณสร้างกลุ่ม webpack จะรวมแต่ละโมดูลไว้ในฟังก์ชัน ดังนี้

// index.js
import {render} from './comments.js';
render();

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

↓

// bundle.js (part  of)
/* 0 */
(function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  var __WEBPACK_IMPORTED_MODULE_0__comments_js__ = __webpack_require__(1);
  Object(__WEBPACK_IMPORTED_MODULE_0__comments_js__["a" /* render */])();
}),
/* 1 */
(function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  __webpack_exports__["a"] = render;
  function render(data, target) {
    console.log('Rendered!');
  }
})

ก่อนหน้านี้จำเป็นต้องใช้เพื่อแยกโมดูล CommonJS/AMD ออกจากกัน อย่างไรก็ตาม การดำเนินการนี้จะเพิ่มขนาดและค่าใช้จ่ายเพิ่มเติมด้านประสิทธิภาพสำหรับแต่ละข้อบังคับ

Webpack 2 รองรับโมดูล ES ซึ่งแตกต่างจากโมดูล CommonJS และ AMD ตรงที่สามารถรวมกลุ่มได้โดยไม่ต้องรวมแต่ละรายการไว้ในฟังก์ชัน และ webpack 3 ทำให้การรวมดังกล่าวเป็นไปได้ด้วยการต่อโมดูล การดำเนินการต่อท้ายโมดูลจะทําดังนี้

// index.js
import {render} from './comments.js';
render();

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

↓

// Unlike the previous snippet, this bundle has only one module
// which includes the code from both files

// bundle.js (part of; compiled with ModuleConcatenationPlugin)
/* 0 */
(function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

  // CONCATENATED MODULE: ./comments.js
    function render(data, target) {
    console.log('Rendered!');
  }

  // CONCATENATED MODULE: ./index.js
  render();
})

ความแตกต่างนี้ชัดเจนไหม ในแพ็กเกจธรรมดา โมดูล 0 ต้องการ render จากโมดูล 1 เมื่อใช้การต่อโมดูล require จะแทนที่ด้วยฟังก์ชันที่จำเป็นและนําโมดูล 1 ออก แพ็กเกจจะมีโมดูลน้อยกว่าและค่าใช้จ่ายเพิ่มเติมของโมดูลก็น้อยลงด้วย

หากต้องการเปิดใช้ลักษณะการทํางานนี้ ใน webpack 4 ให้เปิดใช้ตัวเลือก optimization.concatenateModules ดังนี้

// webpack.config.js (for webpack 4)
module.exports = {
  optimization: {
    concatenateModules: true
  }
};

ใน webpack 3 ให้ใช้ ModuleConcatenationPlugin ดังนี้

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

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

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

เอกสาร Webpack สําหรับ PluginModuleConcatenation
"ข้อมูลเบื้องต้นเกี่ยวกับการยกระดับขอบเขต"
คำอธิบายโดยละเอียดเกี่ยวกับสิ่งที่ปลั๊กอินนี้ทํา

ใช้ `externals` หากคุณมีทั้งโค้ด webpack และโค้ดที่ไม่ใช่ webpack

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

ภาพหน้าจอของเว็บไซต์โฮสติ้งวิดีโอ — (เว็บไซต์โฮสติ้งวิดีโอแบบสุ่มทั้งหมด)

หากโค้ดทั้ง 2 รายการมีการพึ่งพาทั่วไป คุณสามารถแชร์โค้ดเพื่อหลีกเลี่ยงการดาวน์โหลดโค้ดหลายครั้ง ซึ่งทำได้ด้วยตัวเลือก externals ของ webpack ซึ่งจะแทนที่โมดูลด้วยตัวแปรหรือการนําเข้าภายนอกอื่นๆ

หากมีการขึ้นต่อกันใน `window`

หากโค้ดที่ไม่ใช่ webpack ของคุณใช้ทรัพยากร Dependency ที่พร้อมใช้งานเป็นตัวแปรใน window ให้ตั้งชื่อแทนให้กับชื่อ Dependency เป็นชื่อตัวแปร ดังนี้

// webpack.config.js
module.exports = {
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
};

เมื่อใช้การกําหนดค่านี้ webpack จะไม่รวมแพ็กเกจ react และ react-dom แต่ระบบจะแทนที่ด้วยข้อความประมาณนี้

// bundle.js (part of)
(function(module, exports) {
  // A module that exports `window.React`. Without `externals`,
  // this module would include the whole React bundle
  module.exports = React;
}),
(function(module, exports) {
  // A module that exports `window.ReactDOM`. Without `externals`,
  // this module would include the whole ReactDOM bundle
  module.exports = ReactDOM;
})

หากโหลดข้อกําหนดเป็นแพ็กเกจ AMD

หากโค้ดที่ไม่ใช่ webpack ไม่ได้เปิดเผยข้อมูล Dependency ไปยัง window ปัญหาจะซับซ้อนมากขึ้น อย่างไรก็ตาม คุณยังคงหลีกเลี่ยงการโหลดโค้ดเดียวกันซ้ำได้หากโค้ดที่ไม่ใช่ webpack ใช้แพ็กเกจ AMD

โดยวิธีคอมไพล์โค้ด webpack เป็น AMD Bundle และตั้งชื่อแทนโมดูลเป็น URL ของไลบรารีมีดังนี้

// webpack.config.js
module.exports = {
  output: {
    libraryTarget: 'amd'
  },
  externals: {
    'react': {
      amd: '/libraries/react.min.js'
    },
    'react-dom': {
      amd: '/libraries/react-dom.min.js'
    }
  }
};

Webpack จะรวมกลุ่มเป็น define() และทำให้ต้องอาศัย URL ต่อไปนี้

// bundle.js (beginning)
define(["/libraries/react.min.js", "/libraries/react-dom.min.js"], function () { … });

หากโค้ดที่ไม่ใช่ webpack ใช้ URL เดียวกันเพื่อโหลดทรัพยากร ไฟล์เหล่านี้จะโหลดเพียงครั้งเดียวเท่านั้น คำขอเพิ่มเติมจะใช้แคชของโปรแกรมโหลด

หมายเหตุ: Webpack จะแทนที่เฉพาะการนําเข้าที่ตรงกับคีย์ของออบเจ็กต์ externals ทุกประการ ซึ่งหมายความว่าหากคุณเขียน import React from 'react/umd/react.production.min.js' ระบบจะไม่ยกเว้นคลังนี้จากแพ็กเกจ กรณีนี้เกิดขึ้นได้เนื่องจาก webpack ไม่รู้ว่า import 'react' และ import 'react/umd/react.production.min.js' เหมือนกันหรือไม่ ดังนั้นโปรดระมัดระวัง

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

เอกสาร Webpack ใน externals

สรุป

เปิดใช้โหมดเวอร์ชันที่ใช้งานจริงหากคุณใช้ webpack 4
ย่อขนาดโค้ดด้วยตัวเลือกเครื่องมือบีบอัดและโปรแกรมโหลดระดับกลุ่ม
นำโค้ดสําหรับการพัฒนาเท่านั้นออกโดยแทนที่ NODE_ENV ด้วย production
ใช้โมดูล ES เพื่อเปิดใช้การเขย่าต้นไม้
บีบอัดรูปภาพ
ใช้การเพิ่มประสิทธิภาพเฉพาะรายการอ้างอิง
เปิดใช้การต่อโมดูล
ใช้ externals หากเหมาะกับคุณ

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

ใช้โหมดเวอร์ชันที่ใช้งานจริง (webpack 4 เท่านั้น)

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

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

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

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

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

ระบุ NODE_ENV=production

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

ใช้โมดูล ES

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

ปรับขนาดภาพให้เหมาะสม

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

เพิ่มประสิทธิภาพทรัพยากร Dependency

เปิดใช้การต่อโมดูลสําหรับโมดูล ES (หรือที่เรียกว่าการยกระดับขอบเขต)

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

ใช้ externals หากคุณมีทั้งโค้ด webpack และโค้ดที่ไม่ใช่ webpack

หากมีการขึ้นต่อกันใน window

หากโหลดข้อกําหนดเป็นแพ็กเกจ AMD

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

สรุป

ระบุ `NODE_ENV=production`

ใช้ `externals` หากคุณมีทั้งโค้ด webpack และโค้ดที่ไม่ใช่ webpack

หากมีการขึ้นต่อกันใน `window`