webpack-ant-icon-loader

# webpack-ant-icon-loader !NPM versionnpm-imagenpm-url

一、简介篇

用于解决 在引入ant-design 3.x版本后（全量引入@ant-design/icons图标文件），导致打包生成的主文件较大的问题。

二、安装篇

npm

```shell

npm install webpack-ant-icon-loader --save-dev

```

yarn

```shell

yarn add webpack-ant-icon-loader --dev

```

三、使用篇

webpack

webpack.config.js

```js module.exports = { module:{

rules:[

{

loader:'webpack-ant-icon-loader',

enforce: 'pre',

include:[

require.resolve('@ant-design/icons/lib/dist')

]

}

]

} } ```

umi

.umirc.js

```js export default { chainWebpack(config, { webpack }) {

// code split @ant-design/icons

config.module

.rule('@ant-design/icons')

.include.add(require.resolve('@ant-design/icons/lib/dist')).end()

.use('ant-icon')

.loader('webpack-ant-icon-loader');

},

} ```

react-app-rewired

config-overrides.js

```js const path = require('path'); module.exports = { // The Webpack config to use when compiling your react app for development or production. webpack: function (config, env) {

// ...add your webpack config

// add webpack-ant-icon-loader

config.module.rules.push({

loader: 'webpack-ant-icon-loader',

enforce: 'pre',

include: [

require.resolve('@ant-design/icons/lib/dist')

]

})

return config;

}, } ```

customize-cra

config-overrides.js

```js const path = require('path'); const { override } = require('customize-cra'); module.exports = override( // add webpack-ant-icon-loader (config) => {

config.module.rules.push({

loader: 'webpack-ant-icon-loader',

enforce: 'pre',

include: [

require.resolve('@ant-design/icons/lib/dist')

]

});

return config;

}, ); ```

四、原理篇

主要通过webpack代码拆分(import)来完成体积优化：

• 把@antd-design/icons/lib/dist的图标文件拆成独立的chunk,且异步加载后自动注册该图标文件图标。

由于ant design 内部组件使用了很多图标,所以不考虑按需加载图标的方案，仅仅是将图标文件拆分出来，减少主文件的体积，（类似于加载独立的字体文件)。

• 通过webpack-ant-icon-loader 提供的runtime.js 来完成延迟加载图标的刷新。

由于使用了异步加载图标文件的原因，在首次进入页面后，会导致已渲染的图标组件但是还未注册的图标会出现空白，解决这个问题，需要触发一次组件刷新, 所以通过runtime.js 在异步图标文件加载完成后，从最小层面（仅刷新已渲染但是未注册的的图标)进行一次性组件刷新。刷新完毕后，runtime.js将不再介入操作，一切回归原始流程。

等未来，ant design推出了解决方案，仅需要从webpack.config.js中移除当前loader即可。

五、开源许可

基于 MIT License 开源，使用代码只需说明来源，或者引用 license.txt 即可。