Vue最佳实战系列(二)：开发前你做了吗，按需加载框架组件【减少请求资源】

在接触Vue的过程中，总能令我惊喜，却也因不够老练而带来了让人耗时的bug；但都一一过五关，斩六将，胜在好用且好玩。

所以我想跟你一起拆Vue这堵墙，再把它重新搭建的更好！

这也是我准备写 最佳Vue开发实战系列 的理由。

还等什么？ 一键三连码起！

Vue最佳实战系列

Vue最佳实战系列(一)：设计一个回味无穷的高扩展性路由，比意大利面香

一、整个框架直接引入与按需加载框架组件对比

在开发当中，我们常常不够讲究，通常整个框架直接引入，而用到组件却只有少数的几个，
不仅增加了我们浏览器请求的资源负担，也增加请求的速度。

我们可以来对比一下整个框架直接引入与按需加载框架组件的网络请求资源情况。

整个框架直接引入
按需加载框架组件

通过对比我们很清晰的发现按需加载后资源明显比整个框架直接引入要小的。

而为什么会问开发前你做了吗？

是因为按需加载在框架的开头就有介绍，这里用的是Ant Design of Vue，而Element也是一样开头就介绍。

二、代码展示

这里用的是Ant Design of Vue演示，同理，用Element也是可以的.（不过方式可能不一样，看文档即可）

按需加载的方式有三种，我们使用的是第一种babel-plugin-import，也是官方推荐的一种。

而使用 babel-plugin-import

首先需要安装插件

npm i babel-plugin-import

然后粘贴下面的代码到babel.config.js文件，最后在main.js中导入即可。

{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

完整代码如下：

babel.config.js

module.exports = {
	presets: ["@vue/cli-plugin-babel/preset"],
	plugins: [
		[
			"import",
			{
				"libraryName": "ant-design-vue",
				"libraryDirectory": "es",
				"style": true
			},
		], // `style: true` 会加载 less 文件
	]
};

mian.js

import { Button } from "ant-design-vue";

Vue.use(Button);

最后

最后的最后，为了更好的阅读体验，我把想说的话都放在了下面，嘿嘿。

我是一颗剽悍的种子 把我会的，认真的分享 是我写博客一直不变的信条。
如果你能看到这篇博文，说明咱们还是很有缘的；希望能带给你一些许帮助，创作的不易， 把我文章的知识带走，你的三连留下，点赞，评论，关注，是我最大的动力。