iT邦幫忙

2021 iThome 鐵人賽

DAY 23
2
Modern Web

[ 重構倒數30天,你的網站不Vue白不Vue ] 系列 第 23

[重構倒數第08天] - 圖片瘦身與靜態資源gzip優化

  • 分享至 

  • xImage
  •  

前言

該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章,在這邊整理了許多我自己使用Vue重構很多網站的經驗分享給讀者們。

上個章節我們討論到了利用 PurgeCSS 來進行 CSS 的優化,那接下來我們來談談圖片及其他靜態資源的優化。

Vue Mike

圖片的壓縮

我們在網頁載入的時候,圖片一直是最佔資源的,尤其是像是形象網站或是動態很多的網站,那個需要載入的東西很多,所以往往我們會做一個 loading 的 page,等到圖片載入完成之後才看到頁面,但是這樣對使用者來說其實不是很好,所以這邊在專案 build 的時候我們要盡量壓縮我們的圖片大小,讓網站的載入速度可以加快,以前我們會透過其他的網路上面的服務像是 tinypng 等服務來處理圖片的壓縮,但是現在都透過自動化工具再做編譯的處理,所以我們也應該要透過自動化工具來幫我們壓縮圖片。

tinypng 官網:https://tinypng.com/

我們使用 Vue-cli 開發的時候,它背後是透過 webpack 來做打包的,所以我們要安裝 webpack 的 loader 來進行壓縮

安裝 image-webpack-loader

npm install image-webpack-loader --save-dev

然後加入以下設定到 vue.config.js

const IN_PRODUCTION = process.env.NODE_ENV === "production";
module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    IN_PRODUCTION &&
      config.module
        .rule("images")
        .use("image-webpack-loader")
        .loader("image-webpack-loader")
        .options({
          mozjpeg: { progressive: true, quality: 65 },
          optipng: { enabled: false },
          pngquant: { quality: [0.65, 0.9], speed: 4 },
          gifsicle: { interlaced: false },
        })
        .end();
  },
};

我們可以在 vue.config.js中使用一個叫做 chainWebpack 的函式來使用我們載入的 webpack 的 loader,在這邊我們去先去檢查這個build的環境是不是production,如果不是 production的話,那我就不執行圖片壓縮了,免得開發階段一直壓縮,拖累開發的速度,關於image-webpack-loaderoptions裡面的設定就是我們針對圖片的壓縮率去做調整,詳細的調整詳見它github。

chainWebpack 的官方文件 : https://cli.vuejs.org/guide/webpack.html#chaining-advanced
image-webpack-loader 文件 : https://github.com/tcoopman/image-webpack-loader

好了之後我們可以找一張大一點的圖片來試試看壓縮的功能

https://ithelp.ithome.com.tw/upload/images/20210923/20125854QWux8YlRs5.jpg

我在組件內引入這張圖片,選擇這張圖片你會看到右下角顯示這張圖片是 128.31KB ,然後執行 npm run build

https://ithelp.ithome.com.tw/upload/images/20210923/20125854cONUSEMEQJ.jpg

build 完成後,你看打包出來的圖片變成 46.74KB,明顯變小,所以透過 image-webpack-loader 我們就可以優化圖片的大小,提高載入速度。

看圖片大小的 vscode套件 filesize : https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize

但是還沒完,除了圖片以外我們前端還有一種優化專案的方式叫做 HTTP壓縮 !!!

什麼是 HTTP壓縮 ?

HTTP壓縮是一種內建到 網頁server 和網頁client端中以改進傳輸速度和頻寬利用率的方式,瀏覽器將在下載所需的格式前宣告支援何種方法給伺服器,不支援壓縮方法的瀏覽器將下載未經壓縮的資料,常見的壓縮方案大概就是 brotil、gzip 和 Deflate。

我們這次要使用的就是 gzip的壓縮方式,來對我們打包好的靜態檔案進行壓縮。

首先我們要先安裝一個 vue-cli 的外掛 vue-cli-plugin-compression

執行下列命令

vue add compression

安裝好了之後把以下設定給寫入 vue.config.js

const IN_PRODUCTION = process.env.NODE_ENV === "production";
module.exports = {
  lintOnSave: false,
  pluginOptions: {
    compression: {
      gzip: {
        filename: "[file].gz[query]",
        algorithm: "gzip",
        include: /\.(js|css|html|svg|json)(\?.*)?$/i,
        minRatio: 0.8,
      },
    },
  },
  chainWebpack: (config) => {
    IN_PRODUCTION &&
      config.module
        .rule("images")
        .use("image-webpack-loader")
        .loader("image-webpack-loader")
        .options({
          mozjpeg: { progressive: true, quality: 65 },
          optipng: { enabled: false },
          pngquant: { quality: [0.65, 0.9], speed: 4 },
          gifsicle: { interlaced: false },
        })
        .end();
  },
};

vue-cli-plugin-compression Gitgub : https://www.npmjs.com/package/vue-cli-plugin-compression

打包好的檔案就會多出副檔名為 .gz 的檔案,這些檔案就是我們透過 gzip 的壓縮所產生出來的。

https://ithelp.ithome.com.tw/upload/images/20210923/20125854umotFxuvKA.jpg

接下來我們要請 Devops 幫我們的伺服器開啟 gzip壓縮,這樣子網站在讀取的時候,只要瀏覽器有支援,就會讀取 gzip了。

https://ithelp.ithome.com.tw/upload/images/20210923/20125854JikhC0UO1i.jpg

這邊你就會看到請求的 HTTP headers 告訴 server 請求的壓縮方式,Server會選擇其中一個壓縮方式使用它。

最後

關於壓縮優化的部分就先告一段落,雖說 gzip 的方式不見得每個網站都會使用,但是圖片壓縮是真的需要的,希望大家可以在除了寫code上面,也要稍微處理一下你的靜態檔案。啊! 剛剛忘記提到,如果在 Vue-cli 的圖片太小的話,打包的時候會被轉成 base64 的格式,塞到打包好的 .js檔案裡面,不會產生實體的圖片格式喔。

QRcode

那如果對於Vue3不夠熟的話呢?

Ps. 購買的時候請登入或註冊該平台的會員,然後再使用下面連結進入網站點擊「立即購課」,這樣才可以讓我獲得更多的課程分潤,還可以幫助我完成更多豐富的內容給各位。

我有開設了一堂專門針對Vue3從零開始教學的課程,如果你覺得不錯的話,可以購買我課程來學習
https://hiskio.com/bundles/9WwPNYRpz?s=tc

那如果對於JS基礎不熟的朋友,我也有開設JS的入門課程,可以參考這個課程
https://hiskio.com/bundles/b9Rovqy7z?s=tc

訂閱Mike的頻道享受精彩的教學與分享

Mike 的 Youtube 頻道
Mike的medium
MIke 的官方 line 帳號,好友搜尋 @mike_cheng


上一篇
[重構倒數第09天] - Vue-Cli + PurgeCSS 刪除你用不到的CSS
下一篇
[重構倒數第07天] - 不用靠後端的 client 端上傳圖片預覽圖
系列文
[ 重構倒數30天,你的網站不Vue白不Vue ] 32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言