webpack图片打包优化方案

今天在打包项目时，发现项目体积很大，经过排查后发现，体积基本上都是图片文件夹占用了，然后通过调研webpack的图片优化方案，优化了项目体积，提升了性能。

我们知道webpack只能打包js文件，其余文件需要通过对于的loader进行打包，其中图片是占用体积最大的文件，我们来了解一下webpack有哪些针对图片打包的loader

图片loader

webpack打包图片有file-loader和url-loader两种loader

这两个loader不仅可以处理图片，还可以处理音频，视频，字体等文件

file-loader

可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着 你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。

url-loader

允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。

两者区别

url-loader 可以识别图片的大小，然后把图片转换成base64，从而减少代码的体积，如果图片超过设定的现在，就还是用 file-loader来处理。如果不在乎体积，不想转换成base64，可以不要配这个loader。

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(png|svg|jpe?g)$/i,
        loader: 'url-loader',
        options: {
          limit: 1024*40,//低于40kb的采用了编码解码的形式引入
          outputPath: './image/' //打包后的图片放到img文件夹下
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        loader: 'file-loader',
        options: {
          outputPath: './image/' //打包后的图片放到img文件夹下
        }
      }
    ]
  }
}

图片优化

1. 图片压缩

   对于清晰度要求不高的图片进行压缩

   • 手动压缩：tinypng、图好快、Optimizilla
   • webpack插件压缩：image-webpack-loader、imagemin-webpack-plugin

2. 雪碧图

   将多个小图标合成一张图，减少 HTTP 请求次数

   • webpack插件：webpack-spritesmith
   • UI合成

3. 图片懒加载

   • 页面滑动到图片位置时才加载

优化方案

我们可以通过image-webpack-loader对图片进行压缩，再通过file-loader进行打包，如果图片文件较小，可以通过url-loader经其转换为Base64格式！

安装

 npm install image-webpack-loader

我安装完image-webpack-loader使用时报错了，找了很多原因，结果是因为 npm需要请求国外服务器，导致安装的不完整，所以一直报错，用cnpm就解决了 cnpm install image-webpack-loader

顺便说一下如何安装cnpm

cnpm：因为 npm 安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常。所以淘宝团队创造了个 cnpm 。

• 在安装cnpm 时，必须先设置 淘宝源 替换 npm数据源

  npm config set registry https://registry.npm.taobao.org

• 安装 cnpm

  npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

// 配置 image-webpack-loader (第一步)
            {
                loader: 'image-webpack-loader',
                options: {
                    // 只在 production 环境，因为非常耗时 (第二步)
                    disable: process.env.NODE_ENV === 'production' ? false : true,
                },
            }

效果展示

原体积

打包后体积