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

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

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

Ivan Akulov

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

ใช้โหมดการใช้งานจริง (Webpack 4 เท่านั้น)

Webpack 4 ได้เปิดตัวแฟล็ก mode ใหม่ คุณสามารถกำหนด แฟล็กนี้ไปยัง '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 วิธี ได้แก่ การลดขนาดระดับชุด และ ตัวเลือกเฉพาะตัวโหลด ควรใช้พร้อมกัน

การลดขนาดระดับชุด

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

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

// 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+ ได้

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

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

ระบุ `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 Branch – เนื่องจาก "production" !== 'production' มีค่าเป็น false เสมอ และปลั๊กอินเข้าใจว่าโค้ดภายใน Branch เหล่านี้จะไม่ทำงานเลย

// 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 เว็บแพ็กจะสั่นต้นไม้ได้ การสั่นสะเทือนของต้นไม้เกิดขึ้นเมื่อ ข้ามแผนผังทรัพยากร Dependency ทั้งหมด ตรวจสอบทรัพยากร Dependency ที่ใช้ และนำรายการที่ไม่ได้ใช้ออก ดังนั้น หากคุณใช้ไวยากรณ์ของโมดูล 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 เป็น require และ module.exports ของ CommonJS ส่งตัวเลือก { modules: false } เพื่อปิดใช้ เช่นเดียวกันกับ TypeScript อย่าลืมตั้งค่า { "compilerOptions": { "module": "es2015" } } ใน tsconfig.json ด้วย

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

"เจาะลึกโมดูล ES6"
เอกสาร Webpack เกี่ยวกับการเขย่าต้นไม้

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

รูปภาพมีขนาดมากกว่า เป็นครึ่งหนึ่งของขนาดหน้า ขณะที่ ไม่ได้มีความสำคัญมากเท่ากับ 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`

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 เพื่อหลีกเลี่ยงการคัดลอกไปวางในกฎทั้งสอง (ข้อหนึ่งสำหรับรูปภาพ JPG/PNG/GIF และอีกข้อ 1 รายการสำหรับ 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 (หรือที่เรียกว่าการรอมขอบเขต)

เมื่อคุณสร้าง Bundle นั้น 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 ได้ ซึ่งต่างจากโมดูล 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 สำหรับ ModuleConcatenationPlugin
"ข้อมูลเบื้องต้นเกี่ยวกับขอบเขต กำลังปั้น"
คำอธิบายโดยละเอียดของปลั๊กอินนี้ จะ

ใช้ `externals` หากคุณมีทั้งรหัส Webpack และรหัสที่ไม่ใช่ Webpack

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

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

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

หากมีทรัพยากร Dependency ใน `window`

หากโค้ดที่ไม่ใช่เว็บแพ็กอาศัยทรัพยากร 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;
})

หากโหลดทรัพยากร Dependency เป็นแพ็กเกจ AMD

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

ในการดำเนินการนี้ ให้คอมไพล์โค้ด Webpack เป็นโมดูลและโมดูลชื่อแทนของ AMD ไปยัง 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 () { … });

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

หมายเหตุ: 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 เท่านั้น)

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

เปิดใช้การลดขนาด

การลดขนาดระดับชุด

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

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

ระบุ NODE_ENV=production

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

ใช้โมดูล ES

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

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

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

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

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

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

ใช้ externals หากคุณมีทั้งรหัส Webpack และรหัสที่ไม่ใช่ Webpack

หากมีทรัพยากร Dependency ใน window

หากโหลดทรัพยากร Dependency เป็นแพ็กเกจ AMD

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

สรุป

ระบุ `NODE_ENV=production`

ใช้ `externals` หากคุณมีทั้งรหัส Webpack และรหัสที่ไม่ใช่ Webpack

หากมีทรัพยากร Dependency ใน `window`