你还在全量加载iView么？试试手动配一个吧

给颗星星github:github.com/trsoliu/iVi…

在实际项目开发中，越来越多的模块代码被引入，虽然我们做了很多异步加载的办法，但是代码的体量还是会越来越大；

我们拿iView做了几个项目后，发现iView的很多模块都没有用到，常用的就40～70%左右；

我们看下iView体积：

v2.14.0-rc.1


iView.min.js 1.4MB


iView.min.js 504KB

很显然，已经很大了；

为了首屏加载速度，为了产品，为了运营，为了。。。

我们不得不对iView做模块管理；

其实官方已经提供了方案：

www.iviewui.com/docs/guide/…

按上面的方法，把需要的，一个一个加入进去；

w...wtf.

太随意了，对于懒人来说，还是全量引入来的随意；

有没有一个全的、写好的呢？有！

废话少说；

在构建好项目目录结构后：

我们新建一个iview的文件夹，添加一个index.js;

在项目的main.js中import进来；

接下来，我们来在index.js中我把全量的iView模块都写进去了，使用的时候把不用的注视掉即可：

import Vue from 'vue'
import 'iview/dist/styles/iview.css'
//iview基础模块
const components = {
	Affix,
	Alert,
	AutoComplete,
	Avatar,
	BackTop,
	Badge,
	Breadcrumb,
	BreadcrumbItem,
	Button,
	ButtonGroup,
	Card,
	Carousel,
	CarouselItem,
	Cascader,
	Checkbox,
	CheckboxGroup,
	Col,
	Collapse,
	ColorPicker,
	Content,
	DatePicker,
	Dropdown,
	DropdownItem,
	DropdownMenu,
	Footer,
	Form,
	FormItem,
	Header,
	Icon,
	Input,
	InputNumber,
	Scroll,
	Sider,
	Submenu,
	Layout,
	LoadingBar,
	Menu,
	MenuGroup,
	MenuItem,
	Message,
	Modal,
	Notice,
	Option,
	OptionGroup,
	Page,
	Panel,
	Poptip,
	Progress,
	Radio,
	RadioGroup,
	Rate,
	Row,
	Select,
	Slider,
	Spin,
	Step,
	Steps,
	Table,
	Tabs,
	TabPane,
	Tag,
	Timeline,
	TimelineItem,
	TimePicker,
	Tooltip,
	Transfer,
	Tree,
	Upload
}

import {
	Affix,
	Alert,
	AutoComplete,
	Avatar,
	BackTop,
	Badge,
	Breadcrumb,
	BreadcrumbItem,
	Button,
	ButtonGroup,
	Card,
	Carousel,
	CarouselItem,
	Cascader,
	Checkbox,
	CheckboxGroup,
	Circle,
	Col,
	Collapse,
	ColorPicker,
	Content,
	DatePicker,
	Dropdown,
	DropdownItem,
	DropdownMenu,
	Footer,
	Form,
	FormItem,
	Header,
	Icon,
	Input,
	InputNumber,
	Scroll,
	Sider,
	Submenu,
	Layout,
	LoadingBar,
	Menu,
	MenuGroup,
	MenuItem,
	Message,
	Modal,
	Notice,
	Option,
	OptionGroup,
	Page,
	Panel,
	Poptip,
	Progress,
	Radio,
	RadioGroup,
	Rate,
	Row,
	Select,
	Slider,
	Spin,
	Step,
	Steps,
	Switch,
	Table,
	Tabs,
	TabPane,
	Tag,
	Timeline,
	TimelineItem,
	TimePicker,
	Tooltip,
	Transfer,
	Tree,
	Upload
} from 'iview'

const iviewModule = {
	...components,
	//不能和html标签重复的组件，添加别名(除了Switch、Circle在使用中必须是iSwitch、iCircle,其他都可以不加"i")
	iButton: Button,
	iCircle: Circle,
	iCol: Col,
	iContent: Content,
	iForm: Form,
	iFooter: Footer,
	iHeader: Header,
	iInput: Input,
	iMenu: Menu,
	iOption: Option,
	iProgress: Progress,
	iSelect: Select,
	iSwitch: Switch,
	iTable: Table
}
//循环注册全局组件
Object.keys(iviewModule).forEach(key => {
	Vue.component(key, iviewModule[key]);
});

//将iview模块挂载到vue对象上去
Vue.prototype.$Loading = LoadingBar;
Vue.prototype.$Message = Message;
Vue.prototype.$Modal = Modal;
Vue.prototype.$Notice = Notice;
Vue.prototype.$Spin = Spin;复制代码

好了，接下来，把你不用的注视掉就可以了；

获取文档地址：github.com/trsoliu/iVi…