關於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/服務端渲染)

后續使用再總結