阅读 716

解决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

关注下面的标签,发现更多相似文章
评论