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,然后会出现如下图:
ant-design-vue按需引入icon以及组件_第1张图片
键盘上下键选择,我们选择第二个default,回车就可以了。安装好后如下图:
ant-design-vue按需引入icon以及组件_第2张图片
接着我们将桌面创建好的vue项目文件夹ant-vue-demo拖到vscode编辑器中。如下图:
ant-design-vue按需引入icon以及组件_第3张图片
打开后如图:
ant-design-vue按需引入icon以及组件_第4张图片
至此我们的vue初始化项目完成。

二、按需引入ant-design-vue

1.安装ant-design-vue

接着我们打开vscode的终端Terminal,然后输入命令npm i ant-design-vue,如下图:
ant-design-vue按需引入icon以及组件_第5张图片
安装好后,我们在package.json,运行时的依赖里就可以看到ant-design-vue,同时我们去配置,打包时候的分析报告,--report,如下图:
ant-design-vue按需引入icon以及组件_第6张图片
别忘记修改后保存。

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

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

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

如图:
ant-design-vue按需引入icon以及组件_第7张图片
然后我们在src文件夹下App.vue,输入的评分组件代码:

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

然后在vscode命令行终端输入命令npm run serve,如下图:
ant-design-vue按需引入icon以及组件_第8张图片
我们在浏览器打开,如图所示,ant-design-vue的评分组件就显示在页面了:
ant-design-vue按需引入icon以及组件_第9张图片
接着我们再打开一个命令行终端,我们进行打包压缩分析,在新开的命令行终端输入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里代码,增加如下代码:

plugins: [
     [
       "import",
       { libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css'}
     ]
   ]

如图所示添加:
ant-design-vue按需引入icon以及组件_第10张图片
然后在main.js文件中删除全部引入的代码,增加按需引入的代码:

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

ant-design-vue按需引入icon以及组件_第11张图片
我们重新配置好之后最好重新去启动下服务,否则可能会存在样式出不来的效果,好的我们看到页面也是正常显示评分组件的,如图:
ant-design-vue按需引入icon以及组件_第12张图片
接下来我们再重新开一个命令行终端,npm run build去生成打包的分析,如下图:

可以直观的看到现在只有1.81M,比之前全部引入足足小了1.7M
但是这还不是我们想要的,可以看到我们只引入Icon组件里的星星图表,但是它自己全部进来了,还有moment,我们也不需要这么多。

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

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

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')
            }
        }
    }
}

如下图:
ant-design-vue按需引入icon以及组件_第13张图片
注释写在图中,接着我们在src文件夹下创建antd文件夹,在antd文件夹下创建icons.js这里面就可以写一些我们需要的icon图表,如下图:
ant-design-vue按需引入icon以及组件_第14张图片
好的,我们再在命令行中输入npm run build,然后打开我们文件分析,如图:

可以看到这次只有846kb左右了,我们从一开始的3.75M1.81M再到846kbgzip压缩99kb,(3.75M → 99kb)已经优化了很多了,当然此时你去刷新页面,会发现没有星星组件了,如图:
ant-design-vue按需引入icon以及组件_第15张图片
那这是为什么呢?因为我们在自己写的icons.js中啥事还没做,输入如下代码,按需引入星星图标:

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

如图所示:
ant-design-vue按需引入icon以及组件_第16张图片
这下再npm run serve重启下服务,星星组件就出来了:
ant-design-vue按需引入icon以及组件_第17张图片
然后我们再次在命令行中输入命令npm run build打包证明下看看icon组件是否被全部引入:

我们可以看到icon只有12kb大小。至此ant-design-vue icon的按需加载完成。

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

你可能感兴趣的:(Vue,vue/cli)