ant-design-vue按需引入icon以及组件


3.75M → 1.81M → 99kb的转变

本文目录

  • 一、初始化vue项目文件夹
    • 1.安装vue/cli
    • 2.创建Vue项目
  • 二、按需引入ant-design-vue
    • 1.安装ant-design-vue
      • 1.1 分析全部引入体积有多大
      • 1.2 ant-design-vue按需引入组件
      • 1.3 ant-design-vue按需引入Icon组件

一、初始化vue项目文件夹

1.安装vue/cli

（默认电脑已安装了node）打开命令行终端，输入命令npm install -g @vue/cli 安装vue脚手架工具（已装过不用装，版本需在3.0以上）。安装好后在命令行输入命令vue -V 会出现版本号，如图：
在这里插入图片描述

2.创建Vue项目

在命令行中先cd desktop 到桌面，然后输入命令vue create ant-vue-demo，然后会出现如下图：
在这里插入图片描述
键盘上下键选择，我们选择第二个default，回车就可以了。安装好后如下图：
在这里插入图片描述
接着我们将桌面创建好的vue项目文件夹ant-vue-demo拖到vscode编辑器中。如下图：
在这里插入图片描述
打开后如图：
在这里插入图片描述
至此我们的vue初始化项目完成。

二、按需引入ant-design-vue

1.安装ant-design-vue

接着我们打开vscode的终端Terminal，然后输入命令npm i ant-design-vue，如下图：
在这里插入图片描述
安装好后，我们在package.json，运行时的依赖里就可以看到ant-design-vue，同时我们去配置，打包时候的分析报告，--report，如下图：
在这里插入图片描述
别忘记修改后保存。

1.1 分析全部引入体积有多大

接着我们先来全部引入看看包有多大，打开src文件夹下的main.js，输入：

1
2
3
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);

如图：
在这里插入图片描述
然后我们在src文件夹下App.vue，输入的评分组件代码：

1
2
3
<a-rate :default-value="5">
      <a-icon type="star" slot="character"></a-icon>
    </a-rate>

然后在vscode命令行终端输入命令npm run serve，如下图：
在这里插入图片描述
我们在浏览器打开，如图所示，ant-design-vue的评分组件就显示在页面了：
在这里插入图片描述
接着我们再打开一个命令行终端，我们进行打包压缩分析，在新开的命令行终端输入npm run build，如下图：
在这里插入图片描述
然后我们打开ant-vue-demo/dist/report.html：如图：
在这里插入图片描述
可以看到我们就引了一个评分组件，打包后就这么大了足足有3.75M，这显然是不行的，我们的理想是按需引入。接下来我们来按需引入。

1.2 ant-design-vue按需引入组件

好的，我们现在终端命令行中输入命令npm i babel-plugin-import --dev，如图所示：
在这里插入图片描述
接着修改babel.config.js里代码，增加如下代码：

1
2
3
4
5
6
plugins: [
     [
       "import",
       { libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css'}
     ]
   ]

如图所示添加：
在这里插入图片描述
然后在main.js文件中删除全部引入的代码，增加按需引入的代码：

1
2
import { Rate,Icon } from 'ant-design-vue'
Vue.use(Rate).use(Icon)

在这里插入图片描述
我们重新配置好之后最好重新去启动下服务，否则可能会存在样式出不来的效果，好的我们看到页面也是正常显示评分组件的，如图：
在这里插入图片描述
接下来我们再重新开一个命令行终端，npm run build去生成打包的分析，如下图：
在这里插入图片描述
可以直观的看到现在只有1.81M，比之前全部引入足足小了1.7M。
但是这还不是我们想要的，可以看到我们只引入Icon组件里的星星图表，但是它自己全部进来了，还有moment，我们也不需要这么多。

1.3 ant-design-vue按需引入Icon组件

我们在ant-vue-demo文件夹下创建vue.config.js，输入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require('path')
const {IgnorePlugin} = require('webpack')
function resolve (dir) {
    // path.join()方法用于连接路径
    return path.join(__dirname, dir)
}
module.exports = {
    publicPath: './',
    configureWebpack: {
        plugins: [
            new IgnorePlugin(/^\.\/locale$/, /moment$/)
        ],
        resolve: {
            alias:{
                '@ant-design/icons/lib/dist$': resolve('./src/antd/icons.js')
            }
        }
    }
}

如下图：
在这里插入图片描述
注释写在图中，接着我们在src文件夹下创建antd文件夹，在antd文件夹下创建icons.js这里面就可以写一些我们需要的icon图表，如下图：
在这里插入图片描述
好的，我们再在命令行中输入npm run build，然后打开我们文件分析，如图：
在这里插入图片描述
可以看到这次只有846kb左右了，我们从一开始的3.75M到1.81M再到846kb，gzip压缩99kb，（3.75M → 99kb）已经优化了很多了，当然此时你去刷新页面，会发现没有星星组件了，如图：
在这里插入图片描述
那这是为什么呢？因为我们在自己写的icons.js中啥事还没做，输入如下代码，按需引入星星图标：

1
2
3
export {
    default as StarOutline
} from '@ant-design/icons/lib/outline/StarOutline'

如图所示：
在这里插入图片描述
这下再npm run serve重启下服务，星星组件就出来了：
在这里插入图片描述
然后我们再次在命令行中输入命令npm run build打包证明下看看icon组件是否被全部引入：
在这里插入图片描述
我们可以看到icon只有12kb大小。至此ant-design-vue icon的按需加载完成。

如果你觉得本文对你有帮助的话，请给我一个赞吧。如果有更好的解决方案还望评论告知，谢谢了，愿一起共同进步。