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