【开发小记】vue项目打包可视化

文件的扩大，首屏加载速度逐渐变慢。因此减小文件体积有利于性能的优化。

一、可视化效果

运行命令

npm run build --report

打包生成dist文件夹，在dist文件夹下会出现一个report.html，就是分析图文件。分析图中占据面积越大的文件，就代表占据的更大的体积。

Gzip打包之后的

二、分析

我们发现element-ui占据的空间很大，这是由于直接全局引入了element-ui。下面进行解决。

三、解决

我们这里打算采用按需引入的方式。
（1）要实现按需引入需要借助babel-plugin-component，所以先安装。

	npm install babel-plugin-component -D

（2）修改配置文件，我这里是babel.config.js

 "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

(3)把按需引入的代码单独写在一个js文件里。我们这里在scr文件夹中新建element文件夹，然后新建index.js
(4)按需引入组件，写入到index.js里面去，如下所示
第一种（注意这种方式不好，还是会导致大量冗余引入，看第二种引入方法才对！！！）

// 导入自己需要的组件
import { Select,Menu, MenuItem, 
    Dropdown,DropdownMenu, DropdownItem,
    Table,TableColumn,   Tabs,
    TabPane,Descriptions,DescriptionsItem,Tag,Card,
    Option, Input, Dialog, Row, Col,Carousel,CarouselItem, DatePicker,Button,Loading,Message } from 'element-ui'
const element = {
  install: function (Vue) {
    Vue.use(Select)
    Vue.use(Menu)
    Vue.use(MenuItem)
    Vue.use(Dropdown)
    Vue.use(DropdownMenu)
    Vue.use(DropdownItem)
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Tabs)
    Vue.use(TabPane)
    Vue.use(Descriptions)
    Vue.use(DescriptionsItem)
    Vue.use(Tag)
    Vue.use(Card)
    Vue.use(Option)
    Vue.use(Input)
    Vue.use(Dialog)
    Vue.use(Row)
    Vue.use(Col)
    Vue.use(Carousel)
    Vue.use(CarouselItem)
    Vue.use(DatePicker)
    Vue.use(Button)
    Vue.use(Loading)
    Vue.use(Message)
  }
}
export default element

第二种写法，正确的！！！

// 导入自己需要的组件
import Select from 'element-ui/packages/select'
import Menu from 'element-ui/packages/menu'
import MenuItem  from 'element-ui/packages/menu-item'
import Dropdown from 'element-ui/packages/dropdown'
import DropdownItem  from 'element-ui/packages/dropdown-item'
import Table from 'element-ui/packages/table'
import TableColumn from 'element-ui/packages/table-column'
import Tabs from 'element-ui/packages/tabs'
import TabPane from 'element-ui/packages/tab-pane'
import Descriptions  from 'element-ui/packages/descriptions'
import DescriptionsItem  from 'element-ui/packages/descriptions-item'
import Tag from 'element-ui/packages/tag'
import Card from 'element-ui/packages/card'
import Option  from 'element-ui/packages/option'
import Input from 'element-ui/packages/input'
import Dialog  from 'element-ui/packages/dialog'
import Row from 'element-ui/packages/row'
import Col from 'element-ui/packages/col'
import Carousel from 'element-ui/packages/carousel'
import CarouselItem  from 'element-ui/packages/carousel-item'
import DatePicker  from 'element-ui/packages/date-picker'
import Button from 'element-ui/packages/button'
import Loading from 'element-ui/packages/loading'
import Message  from 'element-ui/packages/message'


// import { Select,Menu, MenuItem, 
//     Dropdown,DropdownMenu, DropdownItem,
//     Table,TableColumn,   Tabs,
//     TabPane,Descriptions,DescriptionsItem,Tag,Card,
//     Option, Input, Dialog, Row, Col,Carousel,CarouselItem, DatePicker,Button,Loading,Message } from 'element-ui'
const element = {
  install: function (Vue) {
    Vue.use(Select)
    Vue.use(Menu)
    Vue.use(MenuItem)
    Vue.use(Dropdown)
    Vue.use(DropdownMenu)
    Vue.use(DropdownItem)
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Tabs)
    Vue.use(TabPane)
    Vue.use(Descriptions)
    Vue.use(DescriptionsItem)
    Vue.use(Tag)
    Vue.use(Card)
    Vue.use(Option)
    Vue.use(Input)
    Vue.use(Dialog)
    Vue.use(Row)
    Vue.use(Col)
    Vue.use(Carousel)
    Vue.use(CarouselItem)
    Vue.use(DatePicker)
    Vue.use(Button)
    Vue.use(Loading)
    Vue.use(Message)
  }
}
export default element

（5）在main.js里面使用该文件。

import 'element-ui/lib/theme-chalk/index.css';
// elementui 按需引入
import element from '@/element/index'
Vue.use(element);

最终效果