从动态导入中删除未使用的语言。

如果动态导入语言环境，则 webpack 会将 date-fns 中的所有语言环境加载到一个包中 (约 160kb) 或拆分到多个块中。

这会延长构建过程并增加占用的空间量。

但是，可以使用 webpack 通过 ContextReplacementPlugin 精简语言。

我们假设我们有一个支持语言环境的点：

config.js 文件

// 查看 date-fns/src/locale 了解可用的语言环境
export const supportedLocales = ['en-US', 'de', 'pl', 'it'];

我们还可以有一个格式化日期的函数：

const getLocale = (locale) => import(`date-fns-locale/locale/${locale}.js`); // 如果使用 CommonJS 则用 require()  导入

const formatDate = (date, formatStyle, locale) => {
    return format(date, formatStyle, {
        locale: getLocale(locale).default
    });
};

为了排除未使用的语言，我们可以使用 webpack ContextReplacementPlugin 插件。

webpack.config.js 文件

import webpack from 'webpack';
import { supportedLocales } from './config.js';

export default config = {
    resolve: {
        alias: {
            'date-fns-locale': path.dirname(
                require.resolve('date-fns/package.json')
            )
        }
    },
    plugins: [
        new webpack.ContextReplacementPlugin(
            /date-fns[/\\]locale/,
            new RegExp(`(${locales.join('|')})\.js$`)
        )
    ]
};

这产生了一个 ~23kb 大小的语言包。