關於VUE首屏加載過長的優化,VUE項目開發優化


1、 按需引入UI組件

當下市面上流行的UI組件基本都支持按需加載,本文以Element UI為例:

(1)     新建一個elementUI.js文件

(2)     訪問地址找到按需引入方式的說明

(3)     復制里面的內容到新建的JS文件中,並注釋掉不用的組件

(4)     在主文件JS(一般為main.js)中引用elementUI.js文件

2、 異步引入路由組件

路由組件的優化主要是文件引入方式的變化,對於引入后的組件使用是一致的。

  Before:
  import index from '@/components/index'
   {
    path: '/ index,
    name: ‘index’,
    component: index
  }

 

方案一:

  After:
    const index = resolve => require(['@/components/index'], resolve)
    
const index = resolve => require.ensure([], () => resolve(require('@/components/index')))

兩段代碼都是將組件分別打包成單個JS文件,在網站加載時會自動解析加載需要的JS文件

 

方案二(推薦方案):

const index = resolve => require.ensure([], () => resolve(require('@/components/index')), 'indexChunk')

 這段代碼將組件分類到名為indexChunk的chunk中,在網站加載時會自動解析需要加載哪個 chunk。雖然分別打包的總體積會變大(同chunk將打包成同一個JS文件),但 是減少了資源請求,從而提升了速度。

3、 請求組件優化:

若使用了Ajax相關的庫,比如vue-resource/axios的話,並且只用到了get、post等基礎方式傳輸,可將其移除項目自己重新封裝ajax請求對象或在兼容fetch瀏覽器中使用fetch請求

4、 SSR(Server Side Render/服務端渲染)

后續使用再總結

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM