This is the 9th day of my participation in the August Wen Challenge.More challenges in August

3.75m → 1.81m → 99KB

Initialize the VUE project folder

1. Install the vue/cli

Start the command line terminal and type NPM install -g@vue /cli to install the vue scaffolding tool. After installation, enter the command vue -v on the command line and the version number will appear, as shown in the figure:

2. Create a Vue project

On the command linecd desktopGo to the desktop and type the commandvue create ant-vue-demo, then the following picture will appear:

Keyboard up and down key selection, we choose the seconddefaultAnd press Enter. After installation, the picture is as follows:

Then we created the desktopvueProject folderant-vue-demodragvscodeIn the editor. The diagram below:

After opening, the picture is as follows:So far ourvueInitialization project complete.

2. Ant-design-vue is introduced on demand

1. Install ant – design – vue

And then we open it upvscodeIn the endTerminal“, and then enter the commandnpm i ant-design-vue, as shown below:

After the installation, we are inpackage.jsonThis can be seen in runtime dependenciesant-design-vueIn the meantime, we configure the analysis report at the time of packaging, --report, as shown below:Don’t forget to modify and save.

1.1 Analyze how large the total introduced volume is

To see how big the package is, open the SRC folder in main.js and type:

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

As shown in figure:And then we hadsrcfolderApp.vue, input the scoring component code:

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

Then, invscodeCommand line terminal input commandsnpm run serve, as shown below:

We open it up in the browser, as shown here,ant-design-vueThe scoring component is displayed on the page:

Then we open another command line terminal, we do the package compression analysis, and enter in the newly opened command line terminalnpm run build, as shown below:

And then we open itant-vue-demo/dist/report.htmlAs shown in figure:You can see that we’ve just got a rating component, and it’s all packed up like this3.75 MObviously, this is not possible. Our ideal is to introduce on demand. Now let’s introduce on demand.

1.2 Ant-design-vue introduces components on demand

Ok, now we enter the command from the terminal command linenpm i babel-plugin-import --dev, as shown in the figure:And then modifybabel.config.jsAdd the following code:

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

Add as shown:Then, inmain.jsDelete all imported code from the file and add imported code on demand:

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

We had better restart the service after reconfiguration, otherwise there may be the effect that the style cannot be displayed. Ok, we can see that the page also displays the scoring component normally, as shown in the figure:Now let’s open up another command line terminal,npm run buildTo generate the packaged analysis as shown below:You can see intuitively that there are only1.81 MThat’s a lot smaller than all the previous ones1.7 M. But that’s not what we want yet, and you can see we’re just introducingIconThe star chart in the component, but it all came in by itself, andmomentWe don’t need so many.

1.3 Ant-Design-Vue introduces Icon components on demand

Create vue.config.js in the ant-vue-demo folder and type the following code:

const path = require('path')
const {IgnorePlugin} = require('webpack')
function resolve (dir) {
    The path.join() method is used to join paths
    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')}}}}Copy the code

The diagram below:

The comments are written in the figure, and then we are insrcCreate a folderantdFolder, inantdCreate a foldericons.jsWe can write some of what we need in hereiconGraph, as shown below:

Ok, so let’s type again on the command linenpm run buildThen open our file for analysis, as shown in the picture:You can see that this time there’s only846kbYeah, we started at the beginning3.75 Mto1.81 MAnd then to846kb.gzipThe compression99kb, (3.75m → 99KB) has been optimized a lot. Of course, when you refresh the page, you will find that there is no star component, as shown in the picture:So why is that? Because we’re writing our ownicons.jsEnter the following code to import the star icon as needed:

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

As shown in the figure:This is againnpm run serveRestart the service and the star component will appear:We then enter the command again on the command linenpm run buildPackage proof to see if icon components are all introduced:We can see thaticononly12kbSize. At this pointant-design-vue iconThe on-demand loading is complete.

If you found this article helpful, please give me a like. If there is a better solution also hope to comment to inform, thank you, is willing to progress together.