關於vue的webpack打包優化問題

smallwei發表於2018-03-30
VueWeb優化

vue是一個單例頁面，所有頁面都是由js動態渲染，因此js的體積會越來越大，從而影像頁面的渲染效能

1.非同步元件

官方推出了非同步元件路由，是一個解決js打包後體積過大問題的方案，
可以很好的吧vue元件按組區分，從而打出不同的js檔案，解決了單一js打包大的問題。
複製程式碼

以下是一個非同步元件打包的最終檔案

關於vue的webpack打包優化問題

後面的數字為hash值，為了js不會緩衝
app為vue以及vue-router等第三方庫的額外配置程式碼
vendor為第三方庫外掛的本身程式碼
mainfest為第三方庫runtime程式碼
陣列部分就是不同分組的非同步打包檔案（幾個組就有幾個js檔案）
複製程式碼

官方非同步元件傳送門

注意：千萬不要把js的元件分的顆粒度很小，js檔案多了也會影響效率，瀏覽器載入js的執行緒一般為4-5個

2.webpack打包配置

第三方庫檔案可以使用第三方的cdn，從而減少了vendor的體積大小。

webpack的打包忽略第三方庫的配置 （webpack.base.conf.js）
複製程式碼
externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex':'Vuex',
  'axios': 'axios',
  'element-ui':'ELEMENT',
}
複製程式碼
要是內網環境下，你又懶得搭建cdn，就把相應的庫檔案下載到本地來使用，像往常一樣引入html裡就可以
複製程式碼

本地庫檔案

關於vue的webpack打包優化問題
引入html檔案

	<body>
		<div id="app"><!--vue-ssr-outlet--></div>
		<script src="/static/cdn/vue/2.5.2/vue.min.js" charset="utf-8"></script>
		<script src="/static/cdn/vuex/2.4.1/vuex.min.js" charset="utf-8"></script>
		<script src="/static/cdn/vue-router/3.0.1/vue-router.min.js" charset="utf-8"></script>
		<script src="/static/cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
		<script src="/static/cdn/element-ui/2.0.5/index.js" charset="utf-8"></script>
	</body>
複製程式碼

bootcdn官方傳送門

實驗證明方法可以減少60%的體積檔案，渲染速度大大提升

3.SSR

ssr就是把前端的渲染改成又後臺直接渲染，將渲染好的頁面直接呈現給客戶，此方法可用於網站的百度推廣和seo優化有重大的意義。

常用的後臺渲染框架有nuxtjs

4.專案拆分

一個專案中的不同模組拆分出來，都可以獨立成vue專案，採用iframe標籤進行跳轉，驗證方面你可以製作一個公用的js驗證庫與服務端進行互動。（有個類似於後臺微服務的體系）

此方法還在實驗階段，只是個人的想法

以上就是最近vue專案的上線後打包優化遇到的問題。

相關文章