Webpack के साथ moment.js को लोकेल्स लोड करने से कैसे रोकें?

एक लोकेल फाइल एक .json फाइल होती है जिसमें एक थीम टेम्पलेट फाइल में उपयोग किए गए टेक्स्ट स्ट्रिंग्स के अनुवादों का सेट होता है। प्रत्येक भाषा के लिए एक अलग लोकेल फाइल उपयोग की जाती है।

जब आप अपने कोड में moment.js को require करते हैं और इसे webpack के साथ बंडल करते हैं, तो बंडल साइज़ बहुत बड़ा हो जाता है क्योंकि इसमें सभी लोकेल फाइल्स शामिल होती हैं।

आप IgnorePlugin का उपयोग करके सभी लोकेल फाइल्स को हटा सकते हैं।

उदाहरण

const webpack = require('webpack');

module.exports = {
  plugins: [
    // moment.js की सभी लोकेल फाइल्स को इग्नोर करें
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/
    }),
  ],
};

// अपने कोड में विशिष्ट लोकेल्स लोड करें
const moment = require('moment');
require('moment/locale/ja');
moment.locale('ja');

बंडलिंग के समय, webpack केवल ja के लिए लोकेल फाइल्स का उपयोग करेगा। इससे बंडल साइज़ बहुत कम हो जाएगा।

मॉडर्न Webpack (v5+) सिंटैक्स

module.exports = {
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/
    })
  ]
};

विकल्प: moment-locales-webpack-plugin

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
  plugins: [
    new MomentLocalesPlugin({
      localesToKeep: ['ja', 'en-gb'], // केवल ये लोकेल्स रखें
    }),
  ],
};

बेहतर विकल्प: दिनांक लाइब्रेरी बदलें

Moment.js अब लिगेसी मोड में है। इन हल्के विकल्पों पर विचार करें:

• date-fns: मॉड्यूलर, ट्री-शेकेबल, ~2KB
• dayjs: Moment जैसा API, ~2KB
• luxon: समृद्ध API, ~12KB
• Temporal API: नया JS स्टैंडर्ड (स्टेज 3)

// date-fns उदाहरण
import { format, parseISO } from 'date-fns';
import { ja } from 'date-fns/locale';

format(parseISO('2023-01-15'), 'PPPP', { locale: ja });