蚂蚁设计 - 巨大的进口

Question

我正在为我的反应应用程序使用和设计库.

而且我面临着巨大的进口,这会伤害我的捆绑(目前由于ant-design lib而缩小版本为1.1 mb).

如何通过我的所有应用程序不同地导入antd组件？

更新:

似乎antd有一些巨大的或非优化的模块.这里的东西 - 唯一的区别是导入Datepicker模块,并且繁荣!+差不多2MB(在开发包中)

Answer 1

目前，antd dist的很大一部分是svg图标。
尚无官方方法来处理它（请在github上查看问题）。

但是存在解决方法。

1. 调整webpack以不同方式解析图标。在您的webpack配置中：

module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};

2. icons.js在文件夹中src/或任何需要的位置创建。确保它与别名路径匹配！
   在此文件中，您定义antd应该包括哪些图标。

export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

也可以通过react-app-rewire（create-react-app修改）config-overwrites.js

Answer 2

1）防止蚂蚁一整天地定位。添加webpack插件，并在webpack.config.js中对其进行配置，如下所示：

plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ru/),
],
resolve: {
    alias: {moment: `moment/moment.js`}
},
target: `web`
}

2）使用与 antd库中相同的时刻版本。

3）使用模块化antd 使用babel-plugin-import

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
    // `style: true` for less
  ]
}

我使用BundleAnalyzerPlugin分析捆绑包。

plugins: [new BundleAnalyzerPlugin()]

Answer 3

我通过如下编辑将我的包大小减少了 500KB config-override.js：

配置覆盖.js

const { override, fixBabelImports } = require('customize-cra');
const path = require('path');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  }),
  // used to minimise bundle size by 500KB
  function(config, env) {
    const alias = config.resolve.alias || {};
    alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './src/icons.js');
    config.resolve.alias = alias;
    return config;
  }
);

./src/icons.js

/**
 * List all antd icons you want to use in your source code
 */
export {
  default as SearchOutline
} from '@ant-design/icons/lib/outline/SearchOutline';

export {
  default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline';

export {
  default as QuestionCircleOutline
} from '@ant-design/icons/lib/outline/QuestionCircleOutline';

export {
  default as PlayCircleOutline
} from '@ant-design/icons/lib/outline/PlayCircleOutline';

export {
  default as PauseCircleOutline
} from '@ant-design/icons/lib/outline/PauseCircleOutline';

export {
  default as LoadingOutline
} from '@ant-design/icons/lib/outline/LoadingOutline';

前

后

Answer 4

查看文档 https://ant.design/docs/react/getting-started#Import-on-Demand ，建议您根据需要导入各个组件。因此，您可以尝试更换

import { Button} from 'antd' 

与

import Button from 'antd/lib/button'

Answer 5

尝试使用 webpack 和 React router进行代码分割。它将帮助您异步加载模块。这是帮助我提高使用 ant 框架时的页面加载时间的唯一解决方案。