webpack

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

如果一个语言环境是动态导入的，那么来自 date-fns 的所有语言环境都由 webpack 加载到一个包中（~160kb）或拆分为多个块。 这会延长构建过程并增加占用的空间量。 但是，可以使用 webpack 使用 ContextReplacementPlugin 来精简语言。

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

config.js:

// `see date-fns/src/locale` for available locales
export const supportedLocales = ['en-US', 'de', 'pl', 'it']

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

const getLocale = (locale) => import(`date-fns/locale/${locale}/index.js`) // or require() if using CommonJS

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

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

webpack.config.js:

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

export default const config = {
  plugins: [
    new webpack.ContextReplacementPlugin(
      /^date-fns[/\\]locale$/,
      new RegExp(`\\.[/\\\\](${supportedLocales.join('|')})[/\\\\]index\\.js$`)
    )
  ]
}

这会产生一个 ~23kb 的语言包。