前端效能優化 Vue

使用webpack生成包檔案分析，找出問題根源

gzip 壓縮

減少http請求

/路由懶載入

cdn 解除瀏覽器同源請求數量限制

ui 框架按需載入

壓縮字型檔案(字蛛)

vue-cli 減少全域性引用的元件

cdnpublic/index.html新增

<% for(var css of htmlwebpackplugin.options.cdn.css)  %> <% for(var js of htmlwebpackplugin.options.cdn.js)  %>

<
!doctype html>
>
<
/div>
<
!-- _____找到這個位置複製在下邊______ --
>
<
%for
(var css of htmlwebpackplugin.options.cdn.css)
%>
<
%for
(var js of htmlwebpackplugin.options.cdn.js)
%>
<
/body>
<
/html>

vue.config.js

chainwebpack:(
config
)=>
;  config.
externals()
;// 通過 html-webpack-plugin 將 cdn 注入到 index.html 之中
config.
plugin
('html').
tap(
(args
)=>);
}

如果需要開發時候用 npm 本地的包，生產環境用 cdn 的話，需要在index.html和vue.config.js加一層判斷process.env.node_env===production

html
<%if
(process.env.
node_env
==='production')%
>
<
%for
(var js of htmlwebpackplugin.options.cdn.js)
%>
<%}
%>
vue.config.js
chainwebpack:(
config
)=>
}

gzip

前端部分

// npm i compression-webpack-plugin -d
const compressionwebpackplugin =
require
('compression-webpack-plugin');
// module.exports.configurewebpack
configurewebpack:(
config
)=>))
;// config.plugins.push(new webpack.ignoreplugin(/^\.\/locale$/, /moment$/)); // 不知道是什麼
}

如果你設定了 configurewebpack 物件形式的路徑別名，則需要合併一下

configurewebpack:,}
,  plugins:
[new
compressionwebpackplugin()
,],}
,當然也可以 以 configurewebpack 函式形式配置路徑別名
configurewebpack
:config
=>

nginx 需要對應開啟 gzip 和靜態 gzip

#開啟和關閉gzip模式 gzip on; #gizp壓縮起點，檔案大於1k才進行壓縮 gzip_min_length 1k; # gzip 壓縮級別，1-9，數字越大壓縮的越好，也越占用cpu時間 gzip_comp_level 6; # 進行壓縮的檔案型別。 #nginx對於靜態檔案的處理模組，開啟後會尋找以.gz結尾的檔案，直接返回，不會占用cpu進行壓縮，如果找不到則不進行壓縮 # gzip_static on|off # 是否在http header中新增vary: accept-encoding，建議開啟 gzip_vary on; # 設定壓縮所需要的緩衝區大小，以4k為單位，如果檔案為7k則申請2*4k的緩衝區 gzip_buffers 4 16k; # 設定gzip壓縮針對的http協議版本

# gzip_http_version 1.1;

server

路由懶載入

設定路由懶載入後，進入首屏會發現還是預載入了所有路由檔案，如果不想預載入需要手動設定

但是這個說不太會影響首屏載入事件，而且會加快頁面跳轉的速度

chainwebpack:(
config
)=>

減少全域性元件

vue 日常開發中，經常註冊全域性元件方便使用

如果全域性元件是自己寫的還好，如果乙個全域性元件 table.vue 中是對 el-table 進行的二次封裝，則首屏載入的時候會看到乙個巨大的 js 檔案chunk-vendors.js -> 4.5m

所以儘量減少全域性元件的可能，不然的話只是單純的跳 /login 頁面都可能卡 3s 白屏

相關部落格

前端效能優化 Vue

前端效能優化

前端效能優化

前端效能優化

相關推薦