Moment.js includes many locales by default, and that can make your bundle bigger than needed. If your app only needs one or two locales, include only those.
This is a quick way to trim size without changing your app logic.
Why locale filtering matters
Without filtering, Webpack may bundle most or all Moment locales. That adds extra KB that users download even when unused.
If you only support, for example, en and id, load only those.
Webpack config example
Use ContextReplacementPlugin:
const webpack = require('webpack');
module.exports = {
// ...your existing config
plugins: [
new webpack.ContextReplacementPlugin(/moment[\/]locale$/, /en|id/),
],
};This tells Webpack to keep only en and id locales.
Verify the result
Build the project and compare bundle size before/after.
Useful checks:
- analyze build output in your bundle analyzer
- verify date formatting still works in supported locales
- verify unsupported locale is not loaded
Runtime usage example
import moment from 'moment';
import 'moment/locale/id';
moment.locale('id');
console.log(moment().format('LL'));If you need only one locale, keep config regex tighter for best results.