Vue组件库开发从入门到精通（二）

我们上次讲到，使用sideEffects 字段可以仅通过读取源文件就能实现按需加载，除此之外，由于我们只注意到了作为组件库的源代码，而忘记了我们的文档也基于webpack打包编译，因此也要把文档加入到sideEffects。

构建配置总是需要反复调整，直到满足自己的需求。上回提到的使用sideEffects 虽然解决了组件按需加载的问题，但是却带来另一个问题：

当修改了组件库的代码后，重新编译打包时，导致组件的使用端（比如文档站点）需要重新全量打包，无法按需加载了。

这很明显，因为组件和组件库之间是互相依赖的，任何一方代码的变更都会导致全量打包。这样的话，其实就和我们之前说的按需加载没有差别了。

那么有什么解决方案呢？我们想到的第一个方案是：不要让文档依赖组件库的代码，这样组件库修改了，文档就不会受到影响了。可是，这样修改起来太费劲了，而且最关键的是，一点都不优雅。

第二个方案就是：让组件库内部自己进行按需加载，也就是在组件库的package.json 文件的exports 字段中指定暴露的入口，这样的话，依赖组件库的项目就可以自己决定是否要按需加载了。接下来就让我们一步步进行操作吧。

首先，我们先修改package.json 文件，在exports 字段中指定暴露的入口：

{
  "name": "my-component-library",
  "version": "1.0.0",
  "main": "dist/index.js",
  "exports": {
    "./Button": "./dist/Button.js",
    "./Icon": "./dist/Icon.js",
    "./Input": "./dist/Input.js"
  }
}

这样，我们就把Button、Icon和Input这三个组件都暴露出来了。接下来，我们在组件库的入口文件index.js 中引入这三个组件，并进行按需加载：

import Button from "./Button.js";
import Icon from "./Icon.js";
import Input from "./Input.js";

const components = {
  Button,
  Icon,
  Input
};

export default components;

这样，我们就完成了组件库内部的按需加载。接下来，我们再回到使用组件库的项目中，修改package.json 文件，在dependencies 字段中指定组件库的依赖版本：

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "my-component-library": "^1.0.0"
  }
}

然后，我们在项目中安装组件库：

npm install my-component-library

最后，我们在项目中引入组件库，并进行按需加载：

import { Button, Icon, Input } from "my-component-library";

const App = {
  components: {
    Button,
    Icon,
    Input
  },
  template: `<div><Button>按钮</Button><Icon>图标</Icon><Input>输入框</Input></div>`
};

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

这样，我们就完成了使用组件库的按需加载。

希望本文对您有所帮助。如果您有任何问题，请随时留言。