[重构倒数第08天] - 图片瘦身与静态资源gzip优化

前言

该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系列文章，在这边整理了许多我自己使用Vue重构很多网站的经验分享给读者们。

上个章节我们讨论到了利用 PurgeCSS 来进行 CSS 的优化，那接下来我们来谈谈图片及其他静态资源的优化。

图片的压缩

我们在网页载入的时候，图片一直是最占资源的，尤其是像是形象网站或是动态很多的网站，那个需要载入的东西很多，所以往往我们会做一个 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-loader它 options里面的设定就是我们针对图片的压缩率去做调整，详细的调整详见它github。

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

好了之後我们可以找一张大一点的图片来试试看压缩的功能

我在组件内引入这张图片，选择这张图片你会看到右下角显示这张图片是 128.31KB，然後执行 npm run build。

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 的压缩所产生出来的。

接下来我们要请 Devops 帮我们的服务器开启 gzip压缩，这样子网站在读取的时候，只要浏览器有支援，就会读取 gzip了。

这边你就会看到请求的 HTTP headers 告诉 server 请求的压缩方式，Server会选择其中一个压缩方式使用它。

最後

关於压缩优化的部分就先告一段落，虽说 gzip 的方式不见得每个网站都会使用，但是图片压缩是真的需要的，希望大家可以在除了写code上面，也要稍微处理一下你的静态档案。啊! 刚刚忘记提到，如果在 Vue-cli 的图片太小的话，打包的时候会被转成 base64 的格式，塞到打包好的 .js档案里面，不会产生实体的图片格式喔。

那如果对於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