VUE如何實現按需載入?

這個東西不好和你解釋,因為我是菜狗發表於2020-09-26

參考:vue專案實現按需載入的3種方式:vue非同步元件、es提案的import()、webpack的require.ensure()

1、 vue非同步元件技術

通過vue-router配置路由,使用vue的非同步元件技術,實現按需載入,但是這種情況下,一個元件會生成一個js檔案。

{
        path: '/promisedemo',
        name:'PromiseDemo',
        component: resolve => require(['../components/PromiseDemo'], reslove)
    }
  1. 非同步元件:在vue中以工廠函式的方式定義元件,這個工廠函式會非同步解析元件定義,Vue只有在這個元件需要被渲染的時候才會觸發該工廠函式,且會把結果快取起來供未來渲染
Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回撥傳遞元件定義
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

這個工廠函式會收到一個resolve回撥,這個回撥函式會在你從伺服器得到元件定義時被呼叫。也可將非同步元件和webpack的code-splitting功能一起配合使用

Vue.component('async-webpack-example', function (resolve) {
  // 這個特殊的 `require` 語法將會告訴 webpack
  // 自動將你的構建程式碼切割成多個包,這些包
  // 會通過 Ajax 請求載入
  require(['./my-async-component'], resolve)
})
  1. **程式碼拆分(code-splitting)**是webpack最引人注目的功能之一, 此功能使您可以將程式碼分成多個捆綁,然後按需或並行載入:方法一:使用entry配置手動拆分程式碼;方法二:防止重複,使用SplitChunksPlugin ,將共同的依賴提取到一個現有的條目或一個全新的塊,類似的外掛還有mini-css-extract-plugin:將CSS從主應用程式中分離出來;方法三:動態匯入,使用import()語法進行動態匯入,或require.ensure

2、es提案的import()

需要webpack > 2.4

// 懶載入
// 下面2行程式碼,沒有指定webpackChunkName,每個元件打包成一個js檔案,若指定了webpackChunkName,則可將某個路由下的所有元件都打包在同個非同步塊中
const Home = () => import ('../views/home/Home')
const Category = () => import ('../views/category/Category')
{
        path: '/home',
        component: Home
    },
    {
        path: '/category',
        component: Category
    }

3、webpack提供的reqiure.ensure()

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
  }
  {
    path: '/hello',
    name: 'Hello',
    component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
  }

相關文章