資訊專欄INFORMATION COLUMN
摘要：最近在研究的按需加載，好奇怪，之前好像并沒(méi)有看到的官文里面有這一部分，是我看差了嗎尬笑其實(shí)只需要看官文就可以了，里面有懶加載的講解，并且附帶了詳細(xì)內(nèi)容的連接。所以很大程度上優(yōu)化了頁(yè)面的初始加載速度。只是為了測(cè)試按需加載隨便寫(xiě)的而已。
最近在研究vue的按需加載，好奇怪，之前好像并沒(méi)有看到vue的官文里面有這一部分，是我看差了嗎hahaha~尬笑~
其實(shí)只需要看vue-router官文就可以了，里面有懶加載的講解，并且附帶了詳細(xì)內(nèi)容的連接。一個(gè)一個(gè)看過(guò)去，很容易操作了。
于是我看了一下。做個(gè)記錄，防止忘記了又要重新看一遍。
首先是使用的vue-cli構(gòu)建的簡(jiǎn)單項(xiàng)目
把多余的東西都刪掉，剩下一個(gè)HelloWord.vue
然后修改目錄接口，新建一個(gè)pages目錄，把HelloWord.vue放進(jìn)去，components目錄新建兩個(gè)文件,test1.vue test2.vue。pages目錄新建一個(gè)Page2.vue
那么就用這四個(gè)文件來(lái)測(cè)試一下
pages目錄下:
HelloWord.vue
Page2.vue
components目錄下:
test1.vue
test2.vue
修改路由router.js內(nèi)容為:
import Vue from "vue"
import Router from "vue-router"
// 這里用到了webpack2的import()它會(huì)返回一個(gè)promise
let HelloWorld = () => import("@/pages/HelloWorld")
let Page2 = () => import("@/pages/Page2")
Vue.use(Router)
export default new Router({
routes: [
{
path: "/",
name: "HelloWorld",
component: HelloWorld
},
{
path: "/page2",
name: "Page2",
component: Page2
}
]
})
然后改寫(xiě)HelloWord.vue和Page2.vue的組件引入形式，也是使用import(),
HelloWord.vue
HOME
page2 {{a}}
最后是根據(jù)webpack的分塊加載形式修改webpack設(shè)置
在根目錄下的build/webpack.prod.confj.js
添加new webpack.optimize.CommonsChunkPlugin("common.js")
然后打包就可以看到效果了。
打包后的文件:
那些[number].[hash].js的文件就是頁(yè)面分塊后的文件了，加載頁(yè)面時(shí)出了那些公共模塊，會(huì)對(duì)應(yīng)只加載響應(yīng)頁(yè)面模塊。并且緩存起來(lái)。所以很大程度上優(yōu)化了頁(yè)面的初始加載速度。
最后Page2.vue, test1.vue, test2.vue的內(nèi)容就不貼了，其實(shí)是很簡(jiǎn)單是實(shí)例來(lái)的。只是為了測(cè)試按需加載隨便寫(xiě)的而已。
參考：
vue-router
webpack官文
示例博文
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/93211.html
摘要：凡是做的項(xiàng)目，特別是移動(dòng)端的項(xiàng)目，首屏加載速度必定是一個(gè)繞不過(guò)去的話題。大家知道這些依賴庫(kù)的文件都會(huì)被一起打包到那個(gè)文件里面，如果這些你的第三方依賴庫(kù)很多，很大的話，那就會(huì)導(dǎo)致這個(gè)文件很大，那首屏加載的速度肯定會(huì)被拖慢。 凡是做SPA的項(xiàng)目，特別是移動(dòng)端的SAP項(xiàng)目，首屏加載速度必定是一個(gè)繞不過(guò)去的話題。接下來(lái)我就我們項(xiàng)目里的一些實(shí)踐來(lái)做一下總結(jié)。希望拋磚引玉，如果各位有更好的方案，不...
摘要：前端面試題及答案總結(jié)掘金技術(shù)征文金三銀四，金九銀十，用來(lái)形容求職最好的幾個(gè)月。因?yàn)榈拇嬖?，至少在被?biāo)準(zhǔn)化的那一刻起，就支持異步編程了。然而異步編程真正發(fā)展壯大，的流行功不可沒(méi)。 showImg(https://segmentfault.com/img/bVVQOH?w=640&h=319); 1、2017前端面試題及答案總結(jié) |掘金技術(shù)征文 金三銀四，金九銀十，用來(lái)形容求職最好的幾個(gè)月...
摘要：原文首發(fā)代碼壓縮如果你用的是服務(wù)器，請(qǐng)修改配置文件其他類似在里加入開(kāi)啟或者關(guān)閉模塊，這里使用表示啟動(dòng)設(shè)置允許壓縮的頁(yè)面最小字節(jié)數(shù)默認(rèn)值是，不管頁(yè)面多大都?jí)嚎s設(shè)置系統(tǒng)獲取幾個(gè)單位的緩存用于存儲(chǔ)的壓縮結(jié)果數(shù)據(jù)流代表以為單位，按照原始數(shù)據(jù)大 原文首發(fā)： https://shuirong.github.io/ 1.代碼壓縮(gzip) 如果你用的是nginx服務(wù)器，請(qǐng)修改配置文件(其他web ...
摘要：所有的高階抽象組件是通過(guò)定義選項(xiàng)來(lái)聲明的。所以一般在生命周期或者中，需要用實(shí)例的方法清除可當(dāng)你有多個(gè)時(shí)，就需要重復(fù)性勞動(dòng)銷毀這件事兒。更多的配置請(qǐng)看雙端開(kāi)啟開(kāi)啟壓縮的好處是什么可以減小文件體積，傳輸速度更快。本文目錄 接口模塊處理 Vue組件動(dòng)態(tài)注冊(cè) 頁(yè)面性能調(diào)試：Hiper Vue高階組件封裝 性能優(yōu)化：eventBus封裝 webpack插件：真香 本文項(xiàng)目基于Vue-Cli3，想知...
摘要：圖片的預(yù)加載是提升用戶體驗(yàn)而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個(gè)結(jié)合起來(lái)放到程序中是一種不錯(cuò)的選擇。 最近在做H5滑頁(yè)時(shí)，遇到一些比較大的場(chǎng)景，動(dòng)輒二十、三十頁(yè)，而圖片更是可恨的能達(dá)到上百個(gè)，所以就會(huì)導(dǎo)致場(chǎng)景在加載的時(shí)候遇到網(wǎng)速比較慢的時(shí)候，用戶等待的時(shí)間特別長(zhǎng)，這樣的話，就有可能導(dǎo)致一部分的用戶沒(méi)有耐心，而丟失這部分用戶，于是就有了這里的圖片的預(yù)加載和懶加載，記個(gè)...
閱讀 3372·2021-11-22 14:44
閱讀 1208·2021-11-16 11:53
閱讀 1347·2021-11-12 10:36
閱讀 802·2021-10-14 09:43
閱讀 3832·2019-08-30 15:55
閱讀 3467·2019-08-30 14:14
閱讀 1839·2019-08-26 18:37
閱讀 3486·2019-08-26 12:12
