VUE如何實現按需載入?
參考:vue專案實現按需載入的3種方式:vue非同步元件、es提案的import()、webpack的require.ensure()
1、 vue非同步元件技術
通過vue-router配置路由,使用vue的非同步元件技術,實現按需載入,但是這種情況下,一個元件會生成一個js檔案。
{
path: '/promisedemo',
name:'PromiseDemo',
component: resolve => require(['../components/PromiseDemo'], reslove)
}
- 非同步元件:在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)
})
- **程式碼拆分(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')
}
相關文章
- Vue 路由按需載入(路由懶載入)Vue路由
- Webpack的Code Splitting實現按需載入Web
- Vue路由元件按需載入的幾種方法Vue路由元件
- react暴露後,webpack4.19.1實現按需載入antdReactWeb
- antd圖示庫按需載入的外掛實現
- 【Vue】路由按需載入(路由懶載入) component: resolve => require([‘../pages/home.vue‘], resolve)Vue路由UI
- 按需載入(code spliting)
- 按需載入原理分析
- 元件複用那些事兒 - React 實現按需載入輪子元件React
- 在vue3中手寫按需載入圖片Vue
- vue專案實現按需載入的3種方式:vue非同步元件、es提案的import()、webpack的require.ensure()Vue非同步元件ImportWebUI
- pdfjs優化,實現按需載入,節省流量和記憶體JS優化記憶體
- vant元件庫按需載入元件
- 【vue系列】當 element-ui 按需引入遇到 vue-router 路由懶載入VueUI路由
- Vue微信專案按需授權登入策略實踐Vue
- 腦闊疼的webpack按需載入Web
- Webpack按需載入秒開應用Web
- vue2升級vue3:vue-i18n國際化非同步按需載入Vue非同步
- 如何在vue中監聽scroll,從而實現滑動載入更多Vue
- 手把手實現圖片懶載入+封裝vue懶載入元件封裝Vue元件
- vue實現首屏載入等待動畫 避免首次載入白屏尷尬Vue動畫
- 如何實現圖片預載入和載入進度條
- React如何實現圖片懶載入React
- vue12-ElementUI tree元件懶載入的實現VueUI元件
- Vue實現一個圖片懶載入外掛Vue
- 如何實現一個圖片載入框架框架
- webpack loader—自己寫一個按需載入外掛Web
- vue中頁面載入進度條效果的實現Vue
- Vue完美記住滾動條和實現下拉載入Vue
- vue 實現tab切換動態載入不同的元件Vue元件
- webpack4+react16+react-router-dom4從零配置到優化,實現路由按需載入(下)WebReact優化路由
- webpack4+react16+react-router-dom4從零配置到優化,實現路由按需載入(上)WebReact優化路由
- vue專案中如何載入markdownVue
- Vue專案全域性配置頁面快取,實現按需讀取快取Vue快取
- 深入淺出的webpack4構建工具---webpack+vue+router 按需載入頁面(十五)WebVue
- 如何實現上拉載入,下拉重新整理?
- vue 實現上拉載入下拉重新整理(思路賊清晰)Vue
- vue3 + vite實現非同步元件和路由懶載入VueVite非同步元件路由