解决Antd打包体积过大

mylittleZ
11,270 阅读2分钟

官方文档推荐：使用 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

avatar
文章
阅读
粉丝