iview 按需引入解决加载慢的问题

如果出现加载2s以上的情况请先查看服务器是否对大文件进行过压缩优化处理。

按照官方文档把iview引入到vue的项目中，全部引入的时候没问题。
当按官方文档显示的按需加载是借助插件babel-plugin-import插件，

安装如下：npm install babel-plugin-import --save-dev，

然后在.babelrc中配置：

"plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["import", {
      "libraryName": "iview",
      "libraryDirectory": "src/components"
    }]
  ]

但是当配置好之后，编译通过，浏览器却报错。iview is not defined。原因是添加按需加载的插件之后就不可以用下面的方式引入iview了

import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)

可以采用官方文档上面的按需引入的方式引入

import Vue from 'vue'
import { Button, Radio } from 'iview'
Vue.component('Button',Button)
Vue.component('Radio',Radio)

然后在vue文件中直接写标签使用。

在实际开发过程中也可以通过另外新建一个js文件用来引入，引入的之后直接引入该插件就可以了

在main.js中通过该方式引入

import './iview'

新建文件代码如下

import Vue from 'vue'
import 'iview/dist/styles/iview.css'

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'
// 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
}

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])
})

经测试通过这种引用js的方式可以把打包后的vendor.js文件从1.2M降低到762KB了，而采用上面的官方文档的引用打包后的文件有636kb，引入决定采用引用js的方式。

这个是用的官方文档的方案进行的测试：

这个是引用js的方式的打包结果：

这个是未采用按需引用的方式的打包结果：

如果对于1M以内的js文件依然出现页面加载速度慢的问题，那就看下服务器是否对大文件开启压缩，对文件的压缩优化是不是正常。

iview 按需引入解决加载慢的问题

猜你喜欢