ant-design-vue introduces icons and components on demand

3.75M → 1.81M → 99kb transition

One, initialize the vue project folder

1. Install vue/cli

(The computer has been installed by default node) Open the command line terminal and enter the command to npm install -g @vue/cliinstall the vuescaffolding tool (it has been installed without installing, the version must be above 3.0). After installation, enter the command on the command line and the vue -Vversion number will appear, as shown in the figure:

2. Create a Vue project

In the command line, go cd desktopto the desktop first , then enter the command vue create ant-vue-demo, and then the following picture will appear:

keyboard up and down keys to select, we choose the second one default, and then press Enter. After installation, as shown below:

Then we drag the created vueproject folder on the desktop ant-vue-demoto the vscodeeditor. As shown in the figure below: After

opening, as shown in the figure: So

far our vueinitialization project is completed.

Second, introduce ant-design-vue on demand

1. Install ant-design-vue

Then we open vscodethe terminal Terminal, and enter the command npm i ant-design-vue, as shown in the following figure: After

installation, we package.jsoncan see it in the runtime dependencies, ant-design-vueand at the same time we go to configure and package the analysis report --report, as shown in the figure below:

Don’t forget to save after modification .

1.1 Analyze how big the total volume is

Then let's first import all of them to see how big the package is. Open the srcfolder main.jsand enter:

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

As shown in the figure:

Then we enter the score component code srcunder the folder App.vue:

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

Then vscodeenter the command in the command line terminal npm run serve, as shown

in the following figure: we open it in the browser, as shown in the figure, ant-design-vuethe score component is displayed on the page:

then we open a command line terminal, we perform package compression analysis, in the newly opened The command line terminal input npm run build, as shown below:

Then we open ant-vue-demo/dist/report.html: as shown: we

can see that we have introduced a scoring component 3.75M, which is so large and sufficient after packaging , which is obviously not feasible. Our ideal is to introduce on demand. Next we will introduce on demand.

1.2 ant-design-vue introduces components on demand

Okay, let's enter the command in the terminal command line npm i babel-plugin-import --dev, as shown in the figure:

Then modify babel.config.jsthe code in, add the following code:

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

Add as shown in the figure:

Then main.jsdelete all the imported codes in the file, and add the codes imported on demand:

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

After we reconfigure it, it is best to restart the service, otherwise there may be effects that the style is not available. If we see the page is also displaying the score component normally, as shown in the figure:

Next, we will reopen a command line terminal , npm run buildTo generate the packaged analysis, as shown in the following figure: It

can be seen intuitively that it is only now 1.81M, which is quite small compared to the previous introduction 1.7M.
But this is not what we want. We can see that we only introduce Iconthe star chart in the component, but it all comes in by itself, and momentwe don't need so much.

1.3 ant-design-vue introduces Icon components on demand

We ant-vue-democreate under the folder vue.config.js, enter the following code:

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

As shown

in the figure below: the comment is written in the figure, and then we srccreate a folder under the antdfolder, antdand create icons.jsit under the folder to write some iconcharts we need , as shown in the figure below:

OK, we enter in the command line npm run build, and then open our file analysis, as shown:

you can only see this time 846kbaround, we from the beginning 3.75Mto 1.81Mthen 846kb, gzipcompression 99kb, (3.75M → 99kb) have been optimized a lot, of course, this time you go to refresh the page, you will find There are no star components, as shown in the figure:

So why is this? Because we have icons.jsn't done anything in what we wrote , enter the following code and introduce the star icon as needed:

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

As shown in the figure:

Now npm run serverestart the service, the star component will come out:

Then we enter the command in the command line again npm run buildto see if the icon component has been fully introduced:

We can see icononly the 12kbsize. So far ant-design-vue icon, the on-demand loading is complete.

If you think this article is helpful to you, please give me a thumbs up. If there is a better solution, I hope to comment and inform, thank you, and I would like to make progress together.