এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

সামনের প্রান্তের আকার হ্রাস করুন

আপনার অ্যাপকে যতটা সম্ভব ছোট করতে ওয়েবপ্যাক কীভাবে ব্যবহার করবেন

Ivan Akulov

আপনি যখন একটি অ্যাপ্লিকেশন অপ্টিমাইজ করছেন তখন প্রথম জিনিসগুলির মধ্যে একটি হল এটিকে যতটা সম্ভব ছোট করা। ওয়েবপ্যাক দিয়ে এটি কীভাবে করবেন তা এখানে।

উৎপাদন মোড ব্যবহার করুন (শুধুমাত্র ওয়েবপ্যাক 4)

ওয়েবপ্যাক 4 নতুন mode পতাকা চালু করেছে। আপনি এই পতাকাটিকে 'development' বা 'production' এ সেট করতে পারেন ওয়েবপ্যাক ইঙ্গিত দিতে যে আপনি একটি নির্দিষ্ট পরিবেশের জন্য অ্যাপ্লিকেশনটি তৈরি করছেন:

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

আপনি উত্পাদনের জন্য আপনার অ্যাপ তৈরি করার সময় production মোড সক্ষম করার বিষয়টি নিশ্চিত করুন৷ এটি ওয়েবপ্যাককে অপ্টিমাইজেশান প্রয়োগ করতে সাহায্য করবে যেমন মিনিফেকশন, লাইব্রেরিতে শুধুমাত্র বিকাশের কোড অপসারণ করা এবং আরও অনেক কিছু ।

আরও পড়া

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}

ওয়েবপ্যাক কোডটি ছোট করার দুটি উপায় সমর্থন করে: বান্ডেল-লেভেল মিনিফিকেশন এবং লোডার-নির্দিষ্ট বিকল্প । এগুলি একই সাথে ব্যবহার করা উচিত।

বান্ডেল-স্তরের মিনিফিকেশন

বান্ডিল-স্তরের মিনিফিকেশন সংকলনের পরে পুরো বান্ডিলকে সংকুচিত করে। এটি কিভাবে কাজ করে তা এখানে:

আপনি এই মত কোড লিখুন:

// 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 মিনিফায়ার ব্যবহার করে। (যদি আপনার কখনও মিনিফিকেশন অক্ষম করার প্রয়োজন হয়, শুধু ডেভেলপমেন্ট মোড ব্যবহার করুন বা optimization.minimize বিকল্পে false পাস করুন।)

ওয়েবপ্যাক 3 এ, আপনাকে সরাসরি UglifyJS প্লাগইন ব্যবহার করতে হবে। প্লাগইনটি ওয়েবপ্যাকের সাথে একত্রিত হয়; এটি সক্ষম করতে, এটি কনফিগারেশনের plugins বিভাগে যোগ করুন:

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

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

দ্রষ্টব্য: ওয়েবপ্যাক 3-এ, UglifyJS প্লাগইন ES2015+ (ES6+) কোড কম্পাইল করতে পারে না। এর মানে হল যে যদি আপনার কোড ক্লাস, তীর ফাংশন বা অন্যান্য নতুন ভাষার বৈশিষ্ট্য ব্যবহার করে এবং আপনি সেগুলি ES5 এ কম্পাইল না করেন, তাহলে প্লাগইনটি একটি ত্রুটি ছুঁড়বে৷

আপনি যদি নতুন সিনট্যাক্স কম্পাইল করতে চান, তাহলে uglifyjs-webpack-plugin প্যাকেজটি ব্যবহার করুন। এটি একই প্লাগইন যা ওয়েবপ্যাকের সাথে বান্ডিল, কিন্তু নতুন, এবং এটি ES2015+ কোড কম্পাইল করতে সক্ষম।

লোডার-নির্দিষ্ট বিকল্প

কোডটি ছোট করার দ্বিতীয় উপায় হল লোডার-নির্দিষ্ট বিকল্প ( লোডার কী )। লোডার বিকল্পগুলির সাথে, আপনি এমন জিনিসগুলিকে সংকুচিত করতে পারেন যা মিনিফায়ার ছোট করতে পারে না। উদাহরণস্বরূপ, যখন আপনি css-loader দিয়ে একটি CSS ফাইল আমদানি করেন, তখন ফাইলটি একটি স্ট্রিং-এ কম্পাইল হয়:

/* 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` নির্দিষ্ট করুন

দ্রষ্টব্য: এটি শুধুমাত্র ওয়েবপ্যাক 3। আপনি যদি প্রোডাকশন মোডের সাথে ওয়েবপ্যাক 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/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 এর সমস্ত ঘটনাকে নির্দিষ্ট মান দিয়ে প্রতিস্থাপন করে। উপরে থেকে কনফিগারেশন সহ:

Webpack "production" এর সাথে process.env.NODE_ENV এর সমস্ত ঘটনা প্রতিস্থাপন করবে :

// 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 মডিউল ব্যবহার করেন, ওয়েবপ্যাক গাছ-কাঁপানো করতে সক্ষম হয়। গাছ কাঁপানো হল যখন একটি বান্ডলার পুরো নির্ভরতা গাছটি অতিক্রম করে, কোন নির্ভরতা ব্যবহার করা হয়েছে তা পরীক্ষা করে এবং অব্যবহৃতগুলিকে সরিয়ে দেয়। সুতরাং, আপনি যদি ES মডিউল সিনট্যাক্স ব্যবহার করেন, ওয়েবপ্যাক অব্যবহৃত কোডটি মুছে ফেলতে পারে:

আপনি একাধিক রপ্তানি সহ একটি ফাইল লেখেন, কিন্তু অ্যাপ তাদের মধ্যে শুধুমাত্র একটি ব্যবহার করে:
```
// 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 ) ব্যবহার করতে হবে না। যেকোন মিনিফায়ার যা ডেড কোড অপসারণকে সমর্থন করে (যেমন ব্যাবেল মিনিফাই প্লাগইন বা গুগল ক্লোজার কম্পাইলার প্লাগইন ) কৌশলটি করবে।

সতর্কতা: ঘটনাক্রমে ES মডিউলগুলি CommonJS-এ কম্পাইল করবেন না। আপনি যদি babel-preset-env বা babel-preset-es2015 এর সাথে Babel ব্যবহার করেন তবে এই প্রিসেটগুলির সেটিংস পরীক্ষা করুন৷ ডিফল্টরূপে, তারা CommonJS-এর require এবং module.exports এ ES' import ও export করে। এটি নিষ্ক্রিয় করতে { modules: false } বিকল্পটি পাস করুন ৷ TypeScript-এর ক্ষেত্রেও একই: আপনার tsconfig.json এ { "compilerOptions": { "module": "es2015" } } সেট করতে ভুলবেন না।

আরও পড়া

"ইএস 6 মডিউল গভীরভাবে"
গাছ কাঁপানো সম্পর্কে ওয়েবপ্যাক ডক্স

ইমেজ অপ্টিমাইজ করুন

চিত্রগুলি পৃষ্ঠার আকারের অর্ধেকেরও বেশি । যদিও তারা জাভাস্ক্রিপ্টের মতো সমালোচনামূলক নয় (যেমন, তারা রেন্ডারিং ব্লক করে না), তারা এখনও ব্যান্ডউইথের একটি বড় অংশ খায়। ওয়েবপ্যাকে অপ্টিমাইজ করতে url-loader , svg-url-loader এবং image-webpack-loader ব্যবহার করুন।

url-loader অ্যাপে ছোট স্ট্যাটিক ফাইল ইনলাইন করে। কনফিগারেশন ছাড়া, এটি একটি পাস করা ফাইল নেয়, এটিকে কম্পাইল করা বান্ডেলের পাশে রাখে এবং সেই ফাইলের একটি url ফেরত দেয়। যাইহোক, যদি আমরা limit বিকল্পটি নির্দিষ্ট করি, তাহলে এটি এই সীমার চেয়ে ছোট ফাইলগুলিকে বেস64 ডেটা ইউআরএল হিসাবে এনকোড করবে এবং এই ইউআরএলটি ফেরত দেবে। এটি জাভাস্ক্রিপ্ট কোডে চিত্রটিকে ইনলাইন করে এবং একটি 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 এর মতোই কাজ করে - এটি ছাড়া এটি Base64 এর পরিবর্তে URL এনকোডিং সহ ফাইলগুলিকে এনকোড করে৷ এটি 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'
      }
    ]
  }
};

লোডারের ডিফল্ট সেটিংস ইতিমধ্যেই ভাল - কিন্তু আপনি যদি এটি আরও কনফিগার করতে চান তবে প্লাগইন বিকল্পগুলি দেখুন৷ কোন বিকল্পগুলি নির্দিষ্ট করতে হবে তা চয়ন করতে, ইমেজ অপ্টিমাইজেশানের বিষয়ে অ্যাডি ওসমানীর চমৎকার গাইডটি দেখুন।

আরও পড়া

নির্ভরতা অপ্টিমাইজ করুন

গড় জাভাস্ক্রিপ্ট আকারের অর্ধেকেরও বেশি নির্ভরতা থেকে আসে এবং সেই আকারের একটি অংশ অপ্রয়োজনীয় হতে পারে।

উদাহরণস্বরূপ, Lodash (v4.17.4 অনুযায়ী) বান্ডেলে 72 KB মিনিফাইড কোড যোগ করে। কিন্তু আপনি যদি শুধুমাত্র এর 20টি পদ্ধতি ব্যবহার করেন, তাহলে আনুমানিক 65 KB মিনিফাইড কোড কিছুই করে না।

আরেকটি উদাহরণ হল Moment.js. এর 2.19.1 সংস্করণটি 223 KB মিনিফাইড কোড নেয়, যা বিশাল - একটি পৃষ্ঠায় জাভাস্ক্রিপ্টের গড় আকার অক্টোবর 2017 এ ছিল 452 KB । যাইহোক, সেই আকারের 170 KB হল স্থানীয়করণ ফাইল । আপনি যদি একাধিক ভাষার সাথে Moment.js ব্যবহার না করেন, তাহলে এই ফাইলগুলি কোনো উদ্দেশ্য ছাড়াই বান্ডিলকে ফুলিয়ে দেবে৷

এই সমস্ত নির্ভরতা সহজেই অপ্টিমাইজ করা যেতে পারে। আমরা একটি গিটহাব রেপোতে অপ্টিমাইজেশান পদ্ধতি সংগ্রহ করেছি – এটি পরীক্ষা করে দেখুন !

ES মডিউলগুলির জন্য মডিউল সংযোজন সক্ষম করুন (ওরফে স্কোপ উত্তোলন)

আপনি যখন একটি বান্ডিল তৈরি করছেন, ওয়েবপ্যাক প্রতিটি মডিউলকে একটি ফাংশনে মোড়ানো হচ্ছে:

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

অতীতে, একে অপরের থেকে কমনজেএস/এএমডি মডিউলগুলিকে বিচ্ছিন্ন করার জন্য এটির প্রয়োজন ছিল। যাইহোক, এটি প্রতিটি মডিউলের জন্য একটি আকার এবং কর্মক্ষমতা ওভারহেড যোগ করেছে।

Webpack 2 ES মডিউলগুলির জন্য সমর্থন চালু করেছে যা CommonJS এবং AMD মডিউলগুলির বিপরীতে, প্রতিটিকে একটি ফাংশন দিয়ে মোড়ানো ছাড়াই বান্ডিল করা যেতে পারে। এবং ওয়েবপ্যাক 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()
  ]
};

আরও পড়া

ModuleConcatenationPlugin এর জন্য Webpack ডক্স
"স্কোপ উত্তোলনের সংক্ষিপ্ত ভূমিকা"
এই প্লাগইন কি করে তার বিস্তারিত বিবরণ

আপনার যদি ওয়েবপ্যাক এবং নন-ওয়েবপ্যাক কোড উভয়ই থাকে তবে `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 প্যাকেজ হিসাবে এই নির্ভরতাগুলি ব্যবহার করে।

এটি করার জন্য, একটি 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 ব্যবহার করে, তাহলে এই ফাইলগুলি শুধুমাত্র একবার লোড হবে - অতিরিক্ত অনুরোধ লোডার ক্যাশে ব্যবহার করবে।

দ্রষ্টব্য: ওয়েবপ্যাক শুধুমাত্র সেই আমদানিগুলিকে প্রতিস্থাপন করে যেগুলি externals বস্তুর কীগুলির সাথে হুবহু মেলে৷ এর মানে হল যে আপনি যদি import React from 'react/umd/react.production.min.js' লেখেন, তাহলে এই লাইব্রেরিটি বান্ডেল থেকে বাদ দেওয়া হবে না। এটি যুক্তিসঙ্গত – ওয়েবপ্যাক জানে না যে import 'react' এবং import 'react/umd/react.production.min.js' একই জিনিস - তাই সতর্ক থাকুন।

আরও পড়া

externals বিষয়ে ওয়েবপ্যাক ডক্স

সারসংক্ষেপ

আপনি ওয়েবপ্যাক 4 ব্যবহার করলে উৎপাদন মোড সক্ষম করুন
বান্ডেল-লেভেল মিনিফায়ার এবং লোডার বিকল্পগুলির সাথে আপনার কোডটি ছোট করুন
production সাথে NODE_ENV প্রতিস্থাপন করে শুধুমাত্র বিকাশের কোডটি সরান
গাছ কাঁপানো সক্ষম করতে ES মডিউল ব্যবহার করুন
ইমেজ কম্প্রেস
নির্ভরতা-নির্দিষ্ট অপ্টিমাইজেশান প্রয়োগ করুন
মডিউল সংযুক্তি সক্ষম করুন
যদি এটি আপনার জন্য বোধগম্য হয় তবে externals ব্যবহার করুন

সামনের প্রান্তের আকার হ্রাস করুন

উৎপাদন মোড ব্যবহার করুন (শুধুমাত্র ওয়েবপ্যাক 4)

আরও পড়া

মিনিফিকেশন সক্ষম করুন

বান্ডেল-স্তরের মিনিফিকেশন

লোডার-নির্দিষ্ট বিকল্প

আরও পড়া

NODE_ENV=production নির্দিষ্ট করুন

আরও পড়া

ES মডিউল ব্যবহার করুন

আরও পড়া

ইমেজ অপ্টিমাইজ করুন

আরও পড়া

নির্ভরতা অপ্টিমাইজ করুন

ES মডিউলগুলির জন্য মডিউল সংযোজন সক্ষম করুন (ওরফে স্কোপ উত্তোলন)

আরও পড়া

আপনার যদি ওয়েবপ্যাক এবং নন-ওয়েবপ্যাক কোড উভয়ই থাকে তবে externals ব্যবহার করুন৷

যদি নির্ভরতা window পাওয়া যায়

যদি নির্ভরতাগুলি AMD প্যাকেজ হিসাবে লোড করা হয়

আরও পড়া

সারসংক্ষেপ

`NODE_ENV=production` নির্দিষ্ট করুন

আপনার যদি ওয়েবপ্যাক এবং নন-ওয়েবপ্যাক কোড উভয়ই থাকে তবে `externals` ব্যবহার করুন৷

যদি নির্ভরতা `window` পাওয়া যায়