1、生成打包報告
通過視覺化的ui面板直接檢視報告
在視覺化的ui面板中，通過控制台和分析面板，可以方便地看到專案中所存在的問題。
2、通過 externals 載入外部 cdn（內容分發網路）資源
預設情況下，通過 import 語法匯入的第三方依賴包，最終會被打包合併到同乙個檔案中，從而導致打包成功後，單檔案體積過大的問題。
為了解決上述問題，可以通過 webpack 的 externals 節點，來配置並載入外部的 cdn 資源。凡是宣告在externals 中的第三方依賴包，都不會被打包
例：
config.
set(
'externals'
,)
3、路由懶載入
① 安裝 @babel/plugin-syntax-dynamic-import 包
② 在 babel.config.js 配置檔案中宣告該外掛程式
③ 將路由改為按需載入的形式，示例**如下：
const
foo=()
=>
import
(/* webpackchunkname: "group-foo" */
'./foo.vue'
)
前端專案優化
1 路由優化 路由懶載入 2 元件優化 react 使用id作為key值，元件繼承purecomponent，使用fragment標籤 3 webpack優化 1 打包優化 配置splitchunksplugin 具體怎麼配置？compression webpack plugin 配置gizp但伺服...
前端優化 webAPP優化總結
1 減少js載入體積 很多庫能用cdn的盡量使用cdn，這樣打包出來的js體積會很小，載入很快。2 盡量採用比較輕量級的ui 元件庫 比如museui，mintui等 3 盡量放在伺服器上，盡量進行壓縮4 儘量減少網路請求數量 程式中的資料，有的能乙個介面返回的盡量乙個介面返回，不要弄太多的介面。5...
前端效能優化 快取優化
控制瀏覽器強快取主要靠兩個響應頭部欄位來實現 expires和cache control，瀏覽器在訪問靜態資源時，會首先判斷該資源是否做了強快取。如果發現是強快取並且快取還在有效期內，那就不會去傳送http請求，而直接使用本地的快取 這個快取可能來自於記憶體，也可能來自本地磁碟空間 其中expire...