關于vue的懶加載實踐

wangzy2019 發布于2019-08-22 15:09 / 833人閱讀

摘要：最近在研究的按需加載，好奇怪，之前好像并沒有看到的官文里面有這一部分，是我看差了嗎尬笑其實只需要看官文就可以了，里面有懶加載的講解，并且附帶了詳細內容的連接。所以很大程度上優化了頁面的初始加載速度。只是為了測試按需加載隨便寫的而已。

最近在研究vue的按需加載，好奇怪，之前好像并沒有看到vue的官文里面有這一部分，是我看差了嗎hahaha~尬笑~

其實只需要看vue-router官文就可以了，里面有懶加載的講解，并且附帶了詳細內容的連接。一個一個看過去，很容易操作了。
于是我看了一下。做個記錄，防止忘記了又要重新看一遍。
首先是使用的vue-cli構建的簡單項目
把多余的東西都刪掉，剩下一個HelloWord.vue
然后修改目錄接口，新建一個pages目錄，把HelloWord.vue放進去，components目錄新建兩個文件,test1.vue test2.vue。pages目錄新建一個Page2.vue
那么就用這四個文件來測試一下

pages目錄下:
HelloWord.vue
Page2.vue

components目錄下:
test1.vue
test2.vue

修改路由router.js內容為:

import Vue from "vue"
import Router from "vue-router"
// 這里用到了webpack2的import()它會返回一個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
    }
  ]
})

然后改寫HelloWord.vue和Page2.vue的組件引入形式，也是使用import(),
HelloWord.vue

最后是根據webpack的分塊加載形式修改webpack設置
在根目錄下的build/webpack.prod.confj.js
添加new webpack.optimize.CommonsChunkPlugin("common.js")

然后打包就可以看到效果了。
打包后的文件:

那些[number].[hash].js的文件就是頁面分塊后的文件了，加載頁面時出了那些公共模塊，會對應只加載響應頁面模塊。并且緩存起來。所以很大程度上優化了頁面的初始加載速度。

最后Page2.vue, test1.vue, test2.vue的內容就不貼了，其實是很簡單是實例來的。只是為了測試按需加載隨便寫的而已。

參考：
vue-router
webpack官文
示例博文

GPU云服務器云服務器 js實現數據的懶加載圖片 vue20開發實踐學習實踐架構實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93211.html

vue項目首頁加載速度優化

摘要：凡是做的項目，特別是移動端的項目，首屏加載速度必定是一個繞不過去的話題。大家知道這些依賴庫的文件都會被一起打包到那個文件里面，如果這些你的第三方依賴庫很多，很大的話，那就會導致這個文件很大，那首屏加載的速度肯定會被拖慢。凡是做SPA的項目，特別是移動端的SAP項目，首屏加載速度必定是一個繞不過去的話題。接下來我就我們項目里的一些實踐來做一下總結。希望拋磚引玉，如果各位有更好的方案，不...

rickchen 2019-08-21 17:06 評論0 收藏0
前端周報：前端面試題及答案總結；JavaScript參數傳遞的深入理解

摘要：前端面試題及答案總結掘金技術征文金三銀四，金九銀十，用來形容求職最好的幾個月。因為的存在，至少在被標準化的那一刻起，就支持異步編程了。然而異步編程真正發展壯大，的流行功不可沒。 showImg(https://segmentfault.com/img/bVVQOH?w=640&h=319); 1、2017前端面試題及答案總結 |掘金技術征文金三銀四，金九銀十，用來形容求職最好的幾個月...

ermaoL 2019-08-21 16:46 評論0 收藏0
Vue SPA(單頁應用)首屏優化實踐

摘要：原文首發代碼壓縮如果你用的是服務器，請修改配置文件其他類似在里加入開啟或者關閉模塊，這里使用表示啟動設置允許壓縮的頁面最小字節數默認值是，不管頁面多大都壓縮設置系統獲取幾個單位的緩存用于存儲的壓縮結果數據流代表以為單位，按照原始數據大原文首發：　https://shuirong.github.io/ 1.代碼壓縮(gzip) 如果你用的是nginx服務器，請修改配置文件(其他web ...

wall2flower 2019-08-21 11:41 評論0 收藏0
「Vue實踐」武裝你的前端項目

摘要：所有的高階抽象組件是通過定義選項來聲明的。所以一般在生命周期或者中，需要用實例的方法清除可當你有多個時，就需要重復性勞動銷毀這件事兒。更多的配置請看雙端開啟開啟壓縮的好處是什么可以減小文件體積，傳輸速度更快。本文目錄接口模塊處理 Vue組件動態注冊頁面性能調試：Hiper Vue高階組件封裝性能優化：eventBus封裝 webpack插件：真香本文項目基于Vue-Cli3，想知...

曹金海 2019-05-23 17:30 評論0 收藏0
圖片的預加載和懶加載

摘要：圖片的預加載是提升用戶體驗而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個結合起來放到程序中是一種不錯的選擇。最近在做H5滑頁時，遇到一些比較大的場景，動輒二十、三十頁，而圖片更是可恨的能達到上百個，所以就會導致場景在加載的時候遇到網速比較慢的時候，用戶等待的時間特別長，這樣的話，就有可能導致一部分的用戶沒有耐心，而丟失這部分用戶，于是就有了這里的圖片的預加載和懶加載，記個...

SwordFly 2019-08-21 10:37 評論0 收藏0