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文件依然出现页面加载速度慢的问题，那就看下服务器是否对大文件开启压缩，对文件的压缩优化是不是正常。

需要注意的是，按这种方式的话需要拉取async-validator否则在表单验证的时候浏览器会报错Uncaught (in promise)。

npm install async-validator --save-dev

webpack.base.conf.js中修改下列代码

entry: {

    app: ['babel-polyfill', './src/main.js']

},

{

　　test: /\.js$/,

　　loader: 'babel-loader',

　　include: [resolve('src'), resolve('test'), resolve('/node_modules/iview/src'), resolve('node_modules/webpack-dev-server/client')]

},

添加公共组件

Vue.component('yTooltipCell', resolve => require(['@/components/common/tooltipCell.vue'], resolve))

表格中checkoutbox在IE浏览器下显示异常,在样式中加入下面的重置代码

.ivu-checkbox-inner:after,

.ivu-checkbox-checked .ivu-checkbox-inner:after {

    display: table-cell;

}

参考：https://juejin.im/post/5afd418451882542bd69e61c

参考：https://segmentfault.com/a/1190000010688922

巴特西

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

最新文章

热门文章