अपने ऐप्लिकेशन को छोटा करने के लिए, वेबपैक इस्तेमाल करने का तरीका
किसी ऐप्लिकेशन को ऑप्टिमाइज़ करते समय सबसे पहले, उसे छोटा करना होगा. वेबपैक इस्तेमाल करने का तरीका यहां बताया गया है.
प्रोडक्शन मोड का इस्तेमाल करना (सिर्फ़ वेबपैक 4 के लिए)
Webpack 4 ने mode
का नया फ़्लैग पेश किया है. आपके पास इस फ़्लैग को 'development'
या 'production'
पर सेट करने का विकल्प है. इससे यह पता चलेगा कि वेबपैक को किसी खास एनवायरमेंट के लिए बनाया जा रहा है:
// webpack.config.js
module.exports = {
mode: 'production',
};
प्रोडक्शन के लिए ऐप्लिकेशन बनाते समय, production
मोड चालू करना न भूलें.
इससे वेबपैक, काट-छांट करने, लाइब्रेरी से सिर्फ़ डेवलपमेंट कोड हटाने जैसे ऑप्टिमाइज़ेशन लागू करेगा वगैरह.
इसके बारे में और पढ़ें
छोटा करने की सुविधा चालू करें
छोटा करने का मतलब है कि अतिरिक्त स्पेस हटाकर, वैरिएबल के नाम को छोटा करके कोड को कंप्रेस करना. इस तरह:
// 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}
कोड को छोटा करने के दो तरीके काम करते हैं: बंडल-लेवल पर काट-छांट करना और लोडर के हिसाब से छोटा करने के विकल्प. इनका इस्तेमाल एक साथ किया जाना चाहिए.
बंडल-लेवल पर काट-छांट करने की सुविधा
बंडल-लेवल पर काट-छांट करने की सुविधा से, कंपाइलेशन के बाद पूरा बंडल कंप्रेस हो जाता है. यह सुविधा इस तरह से काम करती है:
आप इस तरह का कोड लिखते हैं:
// comments.js import './comments.css'; export function render(data, target) { console.log('Rendered!'); }
वेबपैक इसे करीब-करीब इस तरह इकट्ठा करता है:
// 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)
वेबपैक 4 में, बंडल-लेवल पर काट-छांट करने की सुविधा अपने-आप चालू हो जाती है. यह सुविधा, प्रोडक्शन मोड में और इसके बिना भी
चालू होती है. यह हुड के तहत, UglifyJS minifier का इस्तेमाल करता है. (अगर आपको कभी भी छोटा करने की सुविधा बंद करनी हो, तो बस डेवलपमेंट मोड का इस्तेमाल करें या false
को optimization.minimize
विकल्प में पास करें.)
वेबपैक 3 में,आपको सीधे UglifyJS प्लगिन
का इस्तेमाल करना होगा. यह प्लगिन, वेबपैक के साथ आता है. इसे चालू करने के लिए, इसे कॉन्फ़िगरेशन के plugins
सेक्शन में जोड़ें:
// webpack.config.js
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.optimize.UglifyJsPlugin(),
],
};
लोडर के लिए खास विकल्प
कोड को छोटा करने का दूसरा तरीका है, लोडर के हिसाब से दिए जाने वाले विकल्प (लोडर क्या है). लोडर के विकल्पों की मदद से, उन चीज़ों को कंप्रेस किया जा सकता है
जिन्हें छोटा करने वाला टूल छोटा नहीं कर सकता. उदाहरण के लिए, जब 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 Close Compiler
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/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.'
);
// …
आम तौर पर, इस तरह की जांच और चेतावनियां, प्रोडक्शन के लिए ज़रूरी नहीं होती हैं. हालांकि, ये कोड में बनी रहती हैं और
लाइब्रेरी का साइज़ बढ़ाती हैं. वेबपैक 4 में, optimization.nodeEnv: 'production'
विकल्प जोड़कर उन्हें हटाएं:
// webpack.config.js (for webpack 4)
module.exports = {
optimization: {
nodeEnv: 'production',
minimize: true,
},
};
वेबपैक 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
की सभी वैल्यू को तय की गई वैल्यू से बदल दिया जाता है. ऊपर दिए गए कॉन्फ़िगरेशन का इस्तेमाल करके:
वेबपैक,
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 }; }
इसके बारे में और पढ़ें
- “एनवायरमेंट वैरिएबल” क्या होते हैं
DefinePlugin
,EnvironmentPlugin
के बारे में वेबपैक दस्तावेज़
ईएस मॉड्यूल का इस्तेमाल करें
फ़्रंट-एंड साइज़ को कम करने का अगला तरीका है, ES मॉड्यूल का इस्तेमाल करना.
जब ईएस मॉड्यूल का इस्तेमाल किया जाता है, तो वेबपैक ट्री-शेकिंग कर पाता है. ट्री-शेकिंग तब होती है, जब कोई बंडलर पूरे डिपेंडेंसी ट्री को पार करता है, यह देखता है कि कौनसी डिपेंडेंसी इस्तेमाल की गई है, और इस्तेमाल नहीं किए गए ट्रिगर को हटाता है. इसलिए, अगर 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 मॉड्यूल में लिखा गया हो.
हालांकि, आपको वेबपैक में पहले से मौजूद मिनीफ़ायर (UglifyJsPlugin
) का इस्तेमाल करने की ज़रूरत नहीं है.
ऐसा कोई भी मिनिफ़ायर जो बंद हो चुके कोड को हटाने की सुविधा देता है
(उदाहरण के लिए, Babel Minify प्लगिन
या Google Closure Compiler प्लगिन) काम करेगा.
इसके बारे में और पढ़ें
पेड़ों के झटकों के बारे में Webpack दस्तावेज़
इमेज ऑप्टिमाइज़ करें
इमेज में पेज का साइज़ आधे से ज़्यादा होता है. हालांकि, वे JavaScript जितना ज़रूरी नहीं होते (उदाहरण के लिए, वे रेंडरिंग को ब्लॉक नहीं करते), फिर भी वे बैंडविथ के एक बड़े हिस्से का इस्तेमाल करते हैं. url-loader
, svg-url-loader
, और image-webpack-loader
का इस्तेमाल करके, उन्हें वेबपैक में ऑप्टिमाइज़ करें.
url-loader
, ऐप्लिकेशन में छोटी स्टैटिक फ़ाइलों को इनलाइन करता है. कॉन्फ़िगरेशन के बिना, यह पास की गई फ़ाइल को इकट्ठा करके, उसे कंपाइल किए गए बंडल के बगल में रखता है और उस फ़ाइल का यूआरएल दिखाता है. हालांकि, अगर हम limit
का विकल्प देते हैं, तो यह इस सीमा से छोटी फ़ाइलों को base64 डेटा यूआरएल के तौर पर कोड में बदल देगा और यह यूआरएल दिखाएगा. यह इमेज को JavaScript कोड में इनलाइन कर देता है और एचटीटीपी अनुरोध सेव करता है:
// 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
की तरह ही काम करता है. हालांकि, यह 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 इमेज के लिए और दूसरा 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'
}
]
}
};
लोडर की डिफ़ॉल्ट सेटिंग पहले से ही लागू हैं – लेकिन अगर आप इसे आगे कॉन्फ़िगर करना चाहते हैं, तो प्लगिन विकल्प देखें. अगर आपको सही विकल्प चुनने हैं, तो ऐडी ओस्मानी की इमेज को ऑप्टिमाइज़ करने के बारे में दी गई बेहतरीन गाइड देखें.
इसके बारे में और पढ़ें
Optimize डिपेंडेंसी
JavaScript के औसत साइज़ का आधे से ज़्यादा हिस्सा, डिपेंडेंसी से मिलता है. साथ ही, हो सकता है कि उस साइज़ का एक हिस्सा ग़ैर-ज़रूरी हो.
उदाहरण के लिए, Lodash (v4.17.4 के वर्शन) में बंडल में कम से कम 72 केबी का कोड जोड़ा जाता है. अगर आप सिर्फ़ इसके 20 तरीकों का इस्तेमाल करते हैं, तो कम से कम किया गया करीब 65 केबी का कोड कुछ भी नहीं करेगा.
दूसरा उदाहरण Moment.js है. इसके 2.19.1 वर्शन में कम से कम कोड 223 केबी का होना चाहिए, जो बहुत बड़ा है – किसी पेज पर JavaScript का औसत साइज़ अक्टूबर 2017 में 452 केबी था. हालांकि, उस साइज़ का 170 केबी का साइज़ लोकलाइज़ेशन फ़ाइलें होती हैं. अगर आपने Moment.js का इस्तेमाल कई भाषाओं में नहीं किया, तो ये फ़ाइलें बिना किसी मकसद के बंडल को बढ़ा देंगी.
इन सभी डिपेंडेंसी को आसानी से ऑप्टिमाइज़ किया जा सकता है. हमने GitHub रेपो में ऑप्टिमाइज़ेशन के तरीके इकट्ठा किए हैं – इसे देखें!
ईएस मॉड्यूल के लिए मॉड्यूल जोड़ने की सुविधा चालू करें (इसे स्कोप हाईस्टिंग भी कहा जाता है)
बंडल बनाते समय, वेबपैक हर मॉड्यूल को फ़ंक्शन में रैप करता है:
// 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 को मॉड्यूल 1 से render
की ज़रूरत थी. मॉड्यूल को जोड़ने की सुविधा से, require
को सिर्फ़ ज़रूरी फ़ंक्शन से बदल दिया जाता है और मॉड्यूल 1 को हटा दिया जाता है. बंडल में कम मॉड्यूल हैं – और कम मॉड्यूल ओवरहेड हैं!
इस सुविधा को चालू करने के लिए, वेबपैक 4 में optimization.concatenateModules
विकल्प चालू करें:
// webpack.config.js (for webpack 4)
module.exports = {
optimization: {
concatenateModules: true
}
};
वेबपैक 3 में, ModuleConcatenationPlugin
का इस्तेमाल करें:
// webpack.config.js (for webpack 3)
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
};
इसके बारे में और पढ़ें
- मॉड्यूलConcatenationPlugin के लिए वेबपैक दस्तावेज़
- “दायरे को रोकने के बारे में कम शब्दों में जानकारी”
- यह प्लग इन क्या करता है, इसका पूरा ब्यौरा
अगर आपके पास वेबपैक और नॉन-वेबपैक कोड, दोनों हैं, तो externals
का इस्तेमाल करें
आपके पास कोई बड़ा प्रोजेक्ट हो सकता है जिसमें वेबपैक की मदद से कुछ कोड कंपाइल किए गए हों और कुछ कोड नहीं हों. बिलकुल किसी वीडियो होस्टिंग साइट की तरह, जहां शायद प्लेयर विजेट को वेबपैक की मदद से बनाया गया हो और उसके आस-पास के पेज पर ऐसा न हो:
अगर कोड के दोनों हिस्सों की डिपेंडेंसी है, तो उन्हें शेयर किया जा सकता है, ताकि उनके कोड को कई बार डाउनलोड न किया जा सके. ऐसा करने के लिए, वेबपैक के externals
विकल्प का इस्तेमाल किया जाता है – यह मॉड्यूल, वैरिएबल या दूसरे बाहरी इंपोर्ट से बदल देता है.
अगर window
में डिपेंडेंसी उपलब्ध है
अगर आपका नॉन-वेबपैक कोड, उन डिपेंडेंसी पर निर्भर करता है जो window
में वैरिएबल के तौर पर उपलब्ध हैं, तो वैरिएबल के नामों के लिए उपनाम वाले डिपेंडेंसी नाम:
// webpack.config.js
module.exports = {
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
}
};
इस कॉन्फ़िगरेशन के तहत, वेबपैक 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 पैकेज के तौर पर लोड किया जाता है
अगर आपका नॉन-वेबपैक कोड, window
में डिपेंडेंसी नहीं दिखाता है, तो चीज़ें ज़्यादा जटिल हो जाती हैं.
हालांकि, अगर बिना वेबपैक वाला कोड इन डिपेंडेंसी का एएमडी पैकेज इस्तेमाल करता है, तो एक ही कोड को दो बार लोड करने से बचा जा सकता है.
ऐसा करने के लिए, लाइब्रेरी यूआरएल में वेबपैक कोड को AMD बंडल और उपनाम मॉड्यूल के तौर पर कंपाइल करें:
// 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()
में रैप करेगा और इसे इन यूआरएल के हिसाब से तय करेगा:
// bundle.js (beginning)
define(["/libraries/react.min.js", "/libraries/react-dom.min.js"], function () { … });
अगर बिना वेबपैक वाला कोड एक ही यूआरएल का इस्तेमाल करके, अपनी डिपेंडेंसी लोड करता है, तो ये फ़ाइलें सिर्फ़ एक बार लोड होंगी. ज़्यादा अनुरोधों के लिए, लोडर कैश मेमोरी का इस्तेमाल किया जाएगा.
इसके बारे में और पढ़ें
externals
पर Webpack दस्तावेज़
खास जानकारी
- वेबपैक 4 इस्तेमाल करने पर, प्रोडक्शन मोड को चालू करें
- बंडल-लेवल पर मौजूद मिनीफ़ायर और लोडर के विकल्पों का इस्तेमाल करके, अपने कोड को छोटा करें
- सिर्फ़ डेवलपमेंट कोड को हटाने के लिए,
NODE_ENV
कोproduction
से बदलें - पेड़ों को हिलाने की सुविधा चालू करने के लिए ES मॉड्यूल का इस्तेमाल करें
- इमेज को कंप्रेस करके डालें
- डिपेंडेंसी के हिसाब से ऑप्टिमाइज़ेशन लागू करना
- मॉड्यूल जोड़ने की प्रोसेस चालू करें
- अगर यह आपको सही लगता है, तो
externals
का इस्तेमाल करें