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/服務端渲染)
后續使用再總結