vue中的懶加載和按需加載
懶加載
（1）定義：懶加載也叫延遲加載沟绪，即在需要的時(shí)候進(jìn)行加載刮便，隨用隨載。
（2）異步加載的三種表示方法：
1. resolve => require([URL], resolve),支持性好
2. () => system.import(URL) , webpack2官網(wǎng)上已經(jīng)聲明將逐漸廢除,不推薦使用
3. () => import(URL), webpack2官網(wǎng)推薦使用,屬于es7范疇,需要配合babel的syntax-dynamic-
import插件使用绽慈。
（3）vue中懶加載的流程：
（4）Vue中懶加載的各種使用地方：
1.路由懶加載：
export default new Router({
routes:[
{
path: '/my',
name: 'my',
//懶加載
component: resolve => require(['../page/my/my.vue'], resolve),
},
]
})
2.組件懶加載：
components: {
historyTab:resolve => {
require(['../../component/historyTab/historyTab.vue'],resolve)
},
},
- 全局懶加載：
Vue.component('mideaHeader', () => {
System.import('./component/header/header.vue')
})
按需加載
（1）按需加載原因：首屏優(yōu)化恨旱，第三方組件庫(kù)依賴過大,會(huì)給首屏加載帶來(lái)很大的壓力，一般解決方式是按需求引入組件坝疼。
（2）element-ui按需加載
element-ui 根據(jù)官方說(shuō)明搜贤，先需要引入babel-plugin-component插件，做相關(guān)配置钝凶，然后直接在組件目錄仪芒，注冊(cè)全局組件。
- 安裝babel-plugin-component插件：
npm install babel-plugin-component –D
- 配置插件腿椎，將 .babelrc修改為：
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
}
3.引入部分組件桌硫，比如 Button和 Select夭咬，那么需要在 main.js中寫入以下內(nèi)容：
- <code class="language-javascript">import Vue from 'vue'
- import { Button, Select } from 'element-ui'
- import App from './App.vue'</code>
Vue.component(Button.name, Button)Vue.component(Select.name, Select) /* 或?qū)憺?*Vue.use(Button) *Vue.use(Select) */
（3）iView按需求加載：
import Checkbox from'iview/src/components/checkbox';
特別提醒:
1.按需引用仍然需要導(dǎo)入樣式啃炸，即在 main.js 或根組件執(zhí)行 import 'iview/dist/styles/iview.css';
2.按需引用是直接引用的組件庫(kù)源代碼，需要借助 babel進(jìn)行編譯卓舵，以 webpack為例：
module: {
rules: [
{test: /iview.src.*?js$/, loader: 'babel' },
{test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
]
}
如下例子中:
//懶加載路由
const routes = [
{ //當(dāng)首次進(jìn)入頁(yè)面時(shí)南用，頁(yè)面沒有顯示任何組件；讓頁(yè)面一加載進(jìn)來(lái)就默認(rèn)顯示first頁(yè)面
path:'/', //重定向，就是給它重新指定一個(gè)方向裹虫，加載一個(gè)組件肿嘲；
component:resolve => require(['@/components/First'],resolve)
},
{
path:'/first',
component:resolve => require(['@/components/First'],resolve)
},
{
path:'/second',
component: resolve => require(['@/components/Second'],resolve)
}
//這里require組件路徑根據(jù)自己的配置引入
]
//最后創(chuàng)建router 對(duì)路由進(jìn)行管理，它是由構(gòu)造函數(shù) new vueRouter() 創(chuàng)建筑公，接受routes 參數(shù)雳窟。
const router = new VueRouter({
routes
})
