Как разделить локали Moment.js на куски с помощью Webpack

Moment.js - отличная библиотека для работы со значениями datetime в javascript, но у нее есть некоторые недостатки. Когда вы устанавливаете его как библиотеку npm и собираете с помощью webpack, он по умолчанию включает все языковые версии, поэтому пакет большой.

Взгляните на первый пример:

1. По умолчанию все языковые стандарты в одном файле.

Давай попробуем. Создайте новый проект узла:

mkdir project-with-moment
cd project-with-moment
npm init
npm install moment
npm install webpack --save-dev

Создайте файл конфигурации для webpack

const path = require('path');
module.exports = () => {
    return {
        output: {
            path: path.resolve(__dirname, 'build'),
            filename: 'app.js',
        },
        entry: './src/index.js',
    };
};

И очень простой index.js в каталоге src.

import moment from 'moment';
console.log(moment().format('dddd'));

Попробуйте собрать это приложение.

node .\node_modules\webpack\bin\webpack.js

Он создает один пакет app.js размером 470 КБ. Это действительно здорово. И почему? Потому что даже локализация моментов на эсперанто входит в комплект. Давай избавимся от этого.

2. Используйте только один язык

Чаще всего используется только один языковой стандарт - английский или ваш родной язык.

Для этого вы можете использовать собственный плагин webpack, чтобы игнорировать некоторые файлы. Конфигурация нового веб-пакета выглядит так:

const webpack = require('webpack');
const path = require('path');
module.exports = () => {
    return {
        output: {
            path: path.resolve(__dirname, 'build'),
            filename: 'app.js',
        },
        entry: './src/index.js',
        plugins: [
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        ],
    };
};

Если вы хотите использовать только английский, вы закончили. Момент без локалей всего 133 кБ. Намного лучше.

Теперь вы можете импортировать другие локали, которые будут включены в комплект.

import 'moment/locale/cs.js';
import 'moment/locale/es.js';

3. Импортируйте все языковые стандарты как асинхронные блоки.

Лучшим решением для многоязычных приложений было бы разделение локалей моментов на части. С webpack это очень просто. Сначала обновите конфигурацию:

const webpack = require('webpack');
const path = require('path');

module.exports = () => {
    return {
        output: {
            path: path.resolve(__dirname, 'build'),
            filename: '[name].js',
            chunkFilename: 'chunks/[name]-[chunkhash].js',
        },
        entry: {
            app: './src/index.js'
        },
        plugins: [
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
            new webpack.optimize.CommonsChunkPlugin({
                names: ['app'],
                async: true,
            })
        ],
    };
};

Как видите, мы будем создавать чанки в собственном каталоге. Самым важным изменением является добавление подключаемого модуля фрагментов общего доступа. Каждая локаль зависит от кода momentjs. Это добавило бы код momentjs к каждому языку. Используя этот плагин, мы можем извлечь этот код в один файл - app.js. Мы также хотим загружать чанк асинхронно.

Чтобы загрузить языковой стандарт в ваше приложение, используйте метод импорта:

import('moment/locale/' + locale + '.js')

Обещание возврата метода импорта. Помните, что на данный момент языком по умолчанию является английский, он уже есть в пакете, и вам не нужно загружать его как фрагмент. Это не применимо, если вы хотите загрузить региональную английскую версию.

Если вы хотите увидеть более сложный пример с асинхронным загрузчиком, посмотрите мою суть - https://gist.github.com/fabulator/d0f5b8b441e88be3a4b0b7f8eb6275c8