Nostradamus Prophecy Machine

    webpack-ant-icon-loader

    1.0.8 • Public • Published

    # webpack-ant-icon-loader

    NPM version

    一、简介篇

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

    二、安装篇

    npm

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

    yarn

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

    三、使用篇

    webpack

    webpack.config.js

    module.exports = {
      module:{
        rules:[
          {
            loader:'webpack-ant-icon-loader',
            enforce: 'pre',
            include:[
              require.resolve('@ant-design/icons/lib/dist')
            ]
          }
        ]
      }
    }
     

    umi

    .umirc.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

    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

    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 即可。

    Install

    npm i webpack-ant-icon-loader

    DownloadsWeekly Downloads

    1,048

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    15.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • beven