欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解vue項目優(yōu)化之按需加載組件-使用webpack require.ensure

 更新時間：2017年06月13日 14:42:39   作者：苦練內(nèi)功  
本篇文章主要介紹了詳解vue項目優(yōu)化之按需加載組件-使用webpack require.ensure，具有一定的參考價值，感興趣的小伙伴們可以參考一下

使用 vue-cli構建的項目,在 默認情況下 ,執(zhí)行 npm run build  會將所有的js代碼打包為一個整體,

打包位置是 dist/static/js/app.[contenthash].js  

類似下面的路由代碼

router/index.js  路由相關信息,該路由文件引入了多個 .vue組件

import Hello from '@/components/Hello'
import Province from '@/components/Province'
import Segment from '@/components/Segment'
import User from '@/components/User'
import Loading from '@/components/Loading'

執(zhí)行 npm run build 會打包為一個整體 app.[contenthash].js ,這個文件是非常大,可能幾兆或者幾十兆,加載會很慢

所以我們需要分模塊打包,把我們想要組合在一起的組件打包到一個 chunk塊中去

分模塊打包需要下面這樣使用 webpack的 require.ensure,并且在最后加入一個 chunk名,

相同 chunk名字的模塊將會打包到一起

router/index.js 修改為懶加載組件

const Province = r => require.ensure([], () => r(require('@/components/Province.vue')), 'chunkname1')
const Segment = r => require.ensure([], () => r(require('@/components/Segment.vue')), 'chunkname1')
const Loading = r => require.ensure([], () => r(require('@/components/Loading.vue')), 'chunkname3')
const User = r => require.ensure([], () => r(require('@/components/User.vue')), 'chunkname3')

根據(jù) chunkame的不同, 上面的四個組件, 將會被分成3個塊打包,最終打包之后與組件相關的js文件會分為3個 (除了app.js,manifest.js, vendor.js)

分模塊打包之后在 dist目錄下是這樣的, 這樣就把一個大的 js文件分為一個個小的js文件了,按需去下載,其他的使用方法和import的效果一樣

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • Vue.js進行查詢操作的實例詳解

    Vue.js進行查詢操作的實例詳解

    這篇文章主要介紹了Vue.js進行查詢操作的實例詳解的相關資料,需要的朋友可以參考下
    2017-08-08
  • Vue關于組件化開發(fā)知識點詳解

    Vue關于組件化開發(fā)知識點詳解

    在本篇文章里，小編給大家分享的是關于Vue關于組件化開發(fā)知識點詳解內(nèi)容，有興趣的朋友們可以學習下。
    2020-05-05
  • Vue多重文字描邊組件實現(xiàn)示例詳解

    Vue多重文字描邊組件實現(xiàn)示例詳解

    這篇文章主要為大家介紹了Vue多重文字描邊組件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-06-06
  • 如何理解Vue的v-model指令的使用方法

    如何理解Vue的v-model指令的使用方法

    這篇文章主要介紹了如何理解Vue的v-model指令的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • Vue3 + MybatisPlus實現(xiàn)批量刪除功能(詳細代碼)

    Vue3 + MybatisPlus實現(xiàn)批量刪除功能(詳細代碼)

    這篇文章主要介紹了Vue3 + MybatisPlus實現(xiàn)批量刪除功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-03-03
  • VUE動態(tài)生成word的實現(xiàn)

    VUE動態(tài)生成word的實現(xiàn)

    這篇文章主要介紹了VUE動態(tài)生成word的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue-drawer-layout實現(xiàn)手勢滑出菜單欄

    vue-drawer-layout實現(xiàn)手勢滑出菜單欄

    這篇文章主要為大家詳細介紹了vue-drawer-layout實現(xiàn)手勢滑出菜單欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-11-11
  • vue router 傳參獲取不到的解決方式

    vue router 傳參獲取不到的解決方式

    今天小編就為大家分享一篇vue router 傳參獲取不到的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue實現(xiàn)跨頁面定位錨點區(qū)域方式

    vue實現(xiàn)跨頁面定位錨點區(qū)域方式

    這篇文章主要介紹了vue實現(xiàn)跨頁面定位錨點區(qū)域方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-05-05
  • Vue動態(tài)組件component標簽的用法大全

    Vue動態(tài)組件component標簽的用法大全

    這篇文章主要介紹了Vue動態(tài)組件component標簽的用法,在Vue中，可以通過component標簽的is屬性動態(tài)指定標簽，本文通過示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
    2022-08-08

最新評論