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

如果动态导入语言环境，则 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 大小的语言包。