概述

目标：在Vue项目中，完整引入、按需引入 Element，这两种引入方式 对 项目打包后的体积的影响。
结论：

• 采用 按需引入 Element 方式，能避免将一些没有使用到的 Element组件 的js、css打包进来，有效减小打包后的体积。
• 按需引入 的好处： 只打包 使用到的 Element组件 的js、css进来，其它没有使用到的则不进行打包。

打包输出文件说明：

• app.js
  我们自己写的js代码会被打包到这个文件中。
• vendor.js
  使用到的所有 第三方js库（如vuejs,element等）的js代码会一起打包到这个文件中。
• app.css
  使用到的第三方UI库（如element等）的 css代码会一起打包到这个文件中。

1. 刚初始化的Vue项目，还没有引入Element

2. 完整引入Element,但是还没有开始使用element组件

可见：完整引入Element，会导致打包后的的vendor.js体积非常大，增大721k。所以不建议完整引入。

3. 完整引入Element,并且在页面中使用了element组件

可见：vendor.js的体积没有变化，只是app.js体积增大了一点。

4.按需引入Element，并且在页面中使用了element组件

可见：vendor.js体积大大减小，为140k,和刚初始化时的Vue项目的基本一样大小。而且app.css 从原来的240k变小到27k。app.js体积不变。