Vue專案打包優化

專案寫完了, 專案需要打包才能上線~

打包命令:yarn build

打包完目錄檔案的說明

帶 chunk-vendors 的都是 第三方的依賴包

打完包的**, 可以直接於伺服器環境根目錄執行~ 不需要額外配置

​外掛程式: live-server 全域性安裝: npm i live-server -g

​ 啟動: 只需要在專案dist目錄中, 執行命令 live-server

但是, 如果將來要上傳到 伺服器的 子目錄, 此時需要配置 publicpath

需要優化的點

第三方包載入的優化: 優化第三方包的載入速度

自己的 js 的載入優化

cdn: 內容分發網路, 分布於世界各地的伺服器, 可以更快速的完成內容的分發

直接部署著第三方包的資源 (且訪問速度會更快)

如果是第三方的包，直接引入cdn的位址, 無需打包到 dist 中

vue, vuerouter, element-ui, axios

// 配置 webpack

configurewebpack:
}

注意：通過cdn引入 element-ui 的樣式檔案後，就不需要在 main.js 中匯入 element-ui 的css檔案了。所以，直接注釋掉 main.js 中的匯入 element-ui 樣式即可

** 如何處理 vue 首屏載入過慢的問題!!!** 大型專案會有這個問題, 需要配置按需載入!!!

所有的元件, 都打包到同乙個檔案中

專案小沒問題, 一次性將所有的元件都載入完了

但是, 如果專案大了, 首次載入會一次性將所有的元件載入, 就不合適了!!!

需求(元件按需載入):

訪問首頁, 載入首頁元件

訪問使用者頁, 載入使用者元件

vue中的非同步元件寫法

// 使用：

// 非同步元件的寫法, 將元件定義成函式
const
home=(
)=>
import
('./components/home/home'
)// 替換：
// import home from './components/home/home'

// 給打包生產的js檔案起名字

const
index=(
)=>
import
(/* webpackchunkname: 'index' */
'./components/index.vue'
)// chunkname相同，將 goods 和 goods-add 兩個元件，打包到一起
const
goods=(
)=>
import
(/* webpackchunkname: 'products' */
'./components/goods'
)const
goodsadd=(
)=>
import
(/* webpackchunkname: 'products' */
'./components/goods-add'
)

webpack打包vue專案效能優化

專案打包上線設定productionsourcemap為false減小.map檔案所佔dist檔案的體積 開啟gzip對dist檔案進一步壓縮 ps 需後端配合開啟gzip方可使用 使用cdn減小打包後vendor.js的體積，從而縮短首屏載入時間 ps 第3步如果注釋掉出現錯誤可以不進行注釋 按需...

vue專案打包檔案過大優化

總結一下前端打包優化，我用的是vue cli3 配置檔案vue.config.js 一 路由懶載入 每次進入乙個新頁面才載入該頁面所需要的資源 component import view setting setting.vue 二 把不常改變的庫放到index.html中，通過cdn引入 最好引入指...

vue 專案打包

作為乙個前端之前並沒有打包過專案，因此想一下打包的效果，記錄一下我的打包過程 作為乙個開端 首先，專案打包前的目錄結構 然後，執行命令列 npm run build 因為是第一次打包，不熟悉打包的過程，與檔案的變更，首先看了一下檔案的結構，發現沒有compenent與views中檔案的生成目錄。是沒...