# webpack

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

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

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

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

`config.js`:

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

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

```javascript
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](https://webpack.js.org/plugins/context-replacement-plugin/)。

`webpack.config.js`:

```javascript
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 的语言包。