组件化按需加载

需要知道的资料

在使用 vant、element-ui、ant-design 等 UI 组件库时候会用到按需加载，通过 babel-plugin-import 插件可以快速配置好自动按需加载组件，还可以通过直接手动引入对应组件和样式文件的方式来实现。同时，在开发中使用 webpack 构建项目时也常使用懒加载技术，本文所述的组件库动态加载和 webpack 构建项目的懒加载是不同的。

为什么要按需加载

组件库按需加载主要目的就是为了减少项目构建打包产物的大小，提高项目线上首屏渲染速度，减少白屏时间，减少流量消耗。

一般组件库会提供一种引入全部组件和 css 文件的写法，例如：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

这种写法经过 webpack 构建之后会将组件库产出的 vant.min.js、index.css 引入并打包至构建产物中，而引入的 vant.min.js 文件是包含组件库全部组件的 js 部分，index.css 包含全部组件的 css 部分。因此，这会导致构建打包产物增大。

组件库动态加载用法

• 方式一：手动加载

手动引入需要使用到的组件以及其对应的样式文件即可，在 webpack 构件时组件库中其他未被引入的文件不会被打包。

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

• 方式二：自动加载

安装 babel-plugin-component 插件，修改 babel 插件配置，不是修改组件库，新建一个项目，这个项目需要使用组件库，进行按需引入

"plugins": [
    [
        "@babel/plugin-transform-runtime",
        {
            "corejs": 3
        }
    ],
    [
        "component",
        {
            "libraryName": "my-lib-test",
            "styleLibrary": {
                "name": "lib-style", // same with styleLibraryName
                "base": false // if theme package has a base.css
            }
        }
    ]
]

在项目中按需引入

import { Button } from 'vant';
Vue.use(Button);