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

詳解vue項(xiàng)目?jī)?yōu)化之按需加載組件-使用webpack require.ensure

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

使用 vue-cli構(gòu)建的項(xiàng)目,在 默認(rèn)情況下 ,執(zhí)行 npm run build  會(huì)將所有的js代碼打包為一個(gè)整體,

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

類似下面的路由代碼

router/index.js  路由相關(guān)信息,該路由文件引入了多個(gè) .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 會(huì)打包為一個(gè)整體 app.[contenthash].js ,這個(gè)文件是非常大,可能幾兆或者幾十兆,加載會(huì)很慢

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

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

相同 chunk名字的模塊將會(huì)打包到一起

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的不同, 上面的四個(gè)組件, 將會(huì)被分成3個(gè)塊打包,最終打包之后與組件相關(guān)的js文件會(huì)分為3個(gè) (除了app.js,manifest.js, vendor.js)

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論