vue專案優化

2021-10-23 19:42:32 字數 379 閱讀 1701

專案優化–進度條新增

移除打包之後的console

只在發布階段移除console

利用vue.config.js修改webpack的預設配置

自定義入口檔案

通過cdn載入外部資源

配置element-ui的cdn資源

根據不同環境定製不同的首頁內容

我們要在index.html中來判斷當前環境為開發階段還是發布階段,但是在index.html無法獲取到process.env.node_env,但是index.html中可以獲取到htmlwebpackplugin該外掛程式的配置資料。

為什麼?

實現路由懶載入

又名:路由按需載入

當匹配某個路由時,才去載入對應的資源檔案

vue專案優化

1.通過nprogress新增進度條效果 安裝執行依賴 匯入nprogress包對應的js和css import nprogress from nprogress import nprogress nprogress.css 在axios的request 中展示進度條 nprogress.start...

vue專案優化

1 盡可能的減少watcher的數量,當監聽資料是乙個物件的時候,最好具體到監聽物件的屬性 2 內容比較多的時候可以用懶載入 分頁 滾動載入或者tab方式,減少每次渲染的數量 3 結合v if,非同步顯示dom結構,減少不必要元件的載入 4 給列表渲染加上唯一的key值,避免重複建立和大規模的重新渲...

Vue專案打包優化

專案寫完了,專案需要打包才能上線 打包命令 yarn build 打包完目錄檔案的說明 帶 chunk vendors 的都是 第三方的依賴包 打完包的 可以直接於伺服器環境根目錄執行 不需要額外配置 外掛程式 live server 全域性安裝 npm i live server g 啟動 只需要...