[Nuxt JS筆記]網站優化教學、提升速度！讓你的網站飛起來吧！
公司任職以來首次接到的難題，做不少功課。
來跟大家分享一下心得與過程
如果有更好的方法，請留言告訴我！:)
為什麼要優化網站？
正確的「網站優化」，會大大影響到你的搜尋引擎排名，也就是俗稱的SEO。
故而可以提升網站曝光
有曝光=有客源=有收入=公司發大財
並且在也會增加使用著體驗
讓使用者覺得:「這個網站很快、操作很順」
同時也會增加使用者對網站的黏著度優化步驟
- 查看詳細的專案大小（簡單）
- 移除不必要的套件 或 改用效能更好且檔案較小的套件（簡單）
- 在nuxt.config.js中，輸入檔案壓縮的code（簡單）
- 圖片懶人載圖(中等)
- 將網站內所有圖片更改成webp（困難）(正在改進中
- 大量更改(優化)寫code方式（困難）(正在改進中
查看詳細的專案大小（簡單）
先在開啟你的nuxt.config.js，並在build下輸入以下code
build:{ ... 其餘設定 ... analyze: true, assetFilter: function(assetFilename) { return assetFilename.endsWith('.js'); }
}
在終端機上輸入npm run build之後觀察你的終端機上log
會顯示你的專案打包編譯後，有哪些過當案過大
沒關係，這時會馬上跳出一個網頁視窗
這裡會顯示每包裡面裝有什麼檔案、套件
此時馬上就要趕緊移除那些沒使用到的套件
移除不必要的套件 或 改用效能更好檔案叫小的套件（簡單）
以此專案為例
因為先前網站處於是開發中，所以有個vue-faker
是專門處理假資料的套件
所以此時就優先移除它！！！
再來我發現專案內有使用到一個叫 vue-moment的套件
是處理日期、時間的套件
但因為這個套件容量較大，好像有1M左右
如果有10個檔案引用這個套件，就會多出10M
所以我改用了一個更好的套件
Dayjs
檔案更小，才200k，並且功能跟 vue-moment差不多
在nuxt.config.js中，輸入檔案壓縮的code（簡單）
輸入以下code，可將所有的console.log移除
uglify: { uglifyOptions: { comments: false, compress: { drop_console: true } }},
要知道！雖然console.log只有一點點，但當專案很大的時候
每個檔案都有一堆console，就會非常占用檔案空間
除非有良好的寫code習慣，不然console一多也是很母湯的！
緊接著在下這行code，可以壓縮在打包過程中創建的HTML文件配置html-minifier的套件。點我參考來源
build:{ ...其餘設定...,
{
collapseBooleanAttributes: true,
collapseWhitespace: false,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeAttributeQuotes: false,
removeComments: false,
removeEmptyAttributes: true,
removeOptionalTags: false,
removeRedundantAttributes: true,
removeScriptTypeAttributes: false,
removeStyleLinkTypeAttributes: false,
removeTagWhitespace: false,
sortClassName: false,
trimCustomFragments: true,
useShortDoctype: true
}
}
圖片懶人載圖(中等)
在瀏覽型的電商網站中
圖片數量應該會佔50%以上
那麼在大量的圖片中，如果網站一開啟
直接一次載入1000張圖片
可能光是Loading時間都等到天黑了
使用者可不會乖乖等網站Load完呢！！
網站載入超過3秒就流失40%的客戶！
（有興趣的人可點文章參考一下）
那麼防止這種情況
就必須使用到懶人載圖
懶人載圖:
是根據使用者瀏覽方式而載入圖片
例如開啟網站後，只會載使用者螢幕視窗內的圖片
只要使者用往下滑
圖片會依序載入
就不會一開網站，一次load上百張圖片的問題
可以大大提升網站效能速度
這時大家可以安裝一個套件vue-lazyload
安裝完在nuxt.config.js plugins引入這個套件
plugins:{
{ src: '~/plugins/vue-lazyload',
ssr: true
},
}接著將在你的html中的img的src更換成v-lazy
v-lazy="https://upload.wikimedia.org/wikipedia/commons/f/f1/Vue.png"vue中使用圖片懶載入vue-lazyload外掛詳細指南
(詳細教學在內文)
將網站內所有圖片更改成webp（困難）(正在改進中
這個之所以困難可能需要前後端的合作
並且很有可能在大量轉檔壓縮的過程中造成破圖、損毀
所以是我才列為困難等級
要先知道一張圖片jpg、jpge、png、甚至有gif
這些都圖都是非常佔空間
一張圖可能500k-1M多不等
試想圖片量多的話...消耗空間可是很可怕的！
當然這項目......目前也正在處理中
所以我也不便多做教學...
將圖片轉成webp檔是檔案小、畫質保持
基本上算是圖片上的神器！！
但缺點可能是支援度不夠好
只有opera和chrome有支援
大量更改(優化)寫code方式（困難）(正在改進中
這個是最終的方式
在coding過程想必有些code寫得不好
做了很多判斷或重複類似的code
這時候需要多善用全域function、變數來執行
避免hard code
結語
優化基本上是無止盡的
新的技術一直出現
科技只會進步
網站只會變得越來越好
未來也希望可以真正掌握優化的技術
這邊來介紹一個好網站
幫助各位可以檢測自家的網站
這個網站非常推！！！
有網站速度、圖表、清單
可以有效的幫你分辨該如何改善網站
