Vue項目優化
- 1.移除控制臺打印
- 2.壓縮圖片
- 3.CDN加速
1.移除控制臺打印
可以使用插件自動去除,插件包括babel-plugin-transform-remove-console
、uglifyjs-webpack-plugin
、terser-webpack-plugin
。最后選擇了terser-webpack-plugin
,腳手架vue-cli
用這個插件來開啟緩存和多線程打包,無需安裝額外的插件。最好還是養成良好的代碼習慣,在開發基本完成后去掉無用的console,vscode中的turbo console就蠻好的。
2.壓縮圖片
盡量使用SVG
代替圖片。根據機型和網絡狀況控制圖片清晰度。對低清晰度圖片使用銳化來提升體驗。設計上避免大型背景圖。或者可以使用yx-tiny
命令行工具進行圖片壓縮。
npm i yx-tiny -Dnpx tiny
根據命令行的提示一步一步完成壓縮。
3.CDN加速
CDN
也稱內容分發網絡,其原理大概是將服務內容分發至全網加速節點,讓用戶從就近的服務器節點上獲取內容,從而提高網站的訪問速度,分擔源站壓力。