解决Antd打包体积过大

官方文档推荐：使用 babel-plugin-import（推荐）。

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 会加载 less 文件
    }]
  ]
}
复制代码

而后只需从 antd 引入模块便可，无需单独引入样式。 实现按需加载,仅仅会加载用到的组件的js 和css，按需加载方式居于.babel配置

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd';
复制代码

其实就至关于简化了，不用这样写了

import Button from 'antd/lib/button';
复制代码

2.externals

externals是决定的是以哪一种模式去加载所引入的额外的包

externals以后 antd 利用 cdn 整个引入（即script标签引入），不须要用 babel-plugin-import 若是用了 babel-plugin-import，那 externals 设置就会不一样，得按 antd 单独组件来设置，如：

externals{
 'antd/lib/table': 'antd.Table'
}
复制代码

分离后在externals中所指定的包就不会被打包

使用第三方 cdn 进行 external 并不能减小总体的尺寸，甚至JS载入的尺寸更大，只是能够减小本身服务器的流量 若是在乎的是总体大小，应该是用 CommonsChunk 或 DllPlugin

补充： 什么是CDN？

cdn(内容分发网络)的做用是加速网络传输，经过将资源部署到服务器，来加快资源到获取速度。目前用到的CDN主要是由Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务。

3.利用webpack.optimize.CommonsChunkPlugin压缩JS文件

可是这个并非针对antd来优化的，而是整个是项目的大小

CommonsChunkPlugin

主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而致使加载时间过长，着实是优化的一把利器。

首屏用不到的组件改为异步加载，而且在webpack设置chunk