vue 專案完成後，因匯入了大量的或體積較大的依賴包以及外掛程式，導致專案變得非常臃腫。下面通過幾個方面來優化頁面的使用者體驗以及提公升頁面的響應速度。在專案中安裝使用
nprogress依賴項，使使用者獲得更好的使用者體驗。使用後會在頁面載入時出現頁面頂部的進度條。效果如下：
// 匯入 nprogress 包，使用其 頁面頂部載入條 優化頁面
import nporigress from
'nprogress'
import
'nprogress/nprogress.css'
// 在 request ***中，展示進度條 nporigress.start()
axios.interceptors.request.
use(config =>
)// 在 response ***中，隱藏進度條 nporigress.done()
axios.interceptors.response.
use(config =>
)
const prodplugins =
// 配置發布階段 需要使用的外掛程式
if(process.env.
node_env
==='production'
)// plugin 相關配置
module.exports =
使用手動在根目錄下建立vue-cli3工具生成的專案，預設隱藏了webpack配置檔案。目的是為了讓程式設計師更加專注於專案的功能及邏輯的實現，而不是專注於配置項的更改。
vue.config.js即可自定義webpack配置
// vue.config.js
module.exports =
在專案的開發階段，模組間的間隔明顯，元件項以及全域性邏輯都會放在這樣一來，不同模式下，分離入口檔案是很有必要的操作。也就是說，在不同模式下，使用不同的入口檔案main.js中而在專案發布階段，會新增很多優化配置以及更改，這就可能導致各個模組的分隔不夠明確，專案維護性變差。
configurewebpack：通過操作物件來配置 webpack
chainwebpack：通過鏈式程式設計來配置 webpack
注意：二者達成的效果沒有區別，只存在配置方法的區別
// vue.config.js
module.exports =
) config.
when
(process.env.
node_env
==='development'
, config =>)}
}
我們預設使用 import 匯入第三方依賴包，這樣會使專案體積較大。導致**請求速度變慢。注意：只需要在 發布模式 配置即可 (配置對應的入口檔案)通過 配置 webpack 的 externals ，便可以使用 外部 cdn 資源。達到縮小專案體積。
只要是在 externals 中配置的第三方依賴，都不會被打包
module.exports =
)// 新增 isprod 屬性，實現 不同模式下的頁面 title 以及 cdn 的是否載入
config.
plugin
('html').
tap(args =>)})}}
配置後：
配置完畢，當前的專案體積縮小了 50% 以上
// babel.config.js
module.exports =
const 元件名 = () => import(/* webpackchunkname: "元件分組名稱" */ '對應路徑')
下面試例匯入兩個元件
// router/index.js
// 配置前
import home from
'../components/home.vue'
import welcome from
'../components/welcome.vue'
// 配置後
const
home=(
)=>
import
(/* webpackchunkname: "login_home_welcome" */
'../components/home.vue'
)const
welcome=(
)=>
import
(/* webpackchunkname: "login_home_welcome" */
'../components/welcome.vue'
)
babel.config.js完成後，只用更改路由檔案中的 元件匯入方式即可。
使用 gzip 可以減小檔案的體積，傳輸更快const compression =通過服務端使用 express 做 gzip 壓縮。
require
('compression'
)// 匯入
// 啟用中介軟體 （順序不能打亂）
use(
compression()
)use
(express.
static(.
/dist)
)這時請求的檔案以及被壓縮完畢
vue cli3專案優化
做公司後台，使用了vue cli3和heyui做為基礎搭建。對專案做過的優化記錄如下 a.配置多變數環境 通過在package.json 裡的scripts配置項中新增 mode 來選擇不同的環境。中可以通過process.env.node env變數來訪問。b.專案新建vue.config.js，...
Vue Cli3專案配置
二 全域性sass配置 三 全域性css配置 四 基礎元件的自動化全域性註冊總結 使用vue cli3構建乙個初始的vue專案 cli3官方文件 1 在 vue.config.js 裡面頂部 路徑依賴 const path require path 查詢檔案方法 const resolve dir ...
Vue cli3專案建立
ps 如果之前安裝有cli2需要先解除安裝cli2才能安裝cli3 cli4 準備工作 檢視當前版本 vue v 或者 vue version1 安裝 解除安裝 cli2 全域性安裝 npm install vue cli g 全域性解除安裝 npm uninstall vue cli g cli3...