Konfigurasi Webpack: Menyertakan Locale Moment.js Tertentu

2 menit baca.
Tags: JavaScriptwebpackMoment.js

Moment.js menyertakan banyak locale secara default, dan itu bisa membuat bundle lebih besar dari yang perlu. Kalau aplikasimu cuma butuh satu atau dua locale, sertakan hanya itu.

Ini cara cepat memangkas ukuran tanpa mengubah logic aplikasi.

Kenapa filter locale penting

Tanpa filter, Webpack bisa membundel sebagian besar atau semua locale Moment. Itu menambah KB ekstra yang diunduh user walau tidak dipakai.

Kalau kamu hanya mendukung, misalnya, en dan id, load dua itu saja.

Contoh config Webpack

Pakai ContextReplacementPlugin:

const webpack = require('webpack');

module.exports = {
  // ...your existing config
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/]locale$/, /en|id/),
  ],
};

Config ini menyuruh Webpack hanya menyimpan locale en dan id.

Cek hasilnya

Build project lalu bandingkan ukuran bundle sebelum dan sesudah.

Yang berguna dicek:

  • analisis output build di bundle analyzer
  • format tanggal masih jalan di locale yang didukung
  • locale yang tidak didukung memang tidak ter-load

Contoh pemakaian di runtime

import moment from 'moment';
import 'moment/locale/id';

moment.locale('id');
console.log(moment().format('LL'));

Kalau cuma butuh satu locale, perketat regex di config untuk hasil terbaik.

Related Posts