webpack系列 —— 性能优化篇

一 压缩图片和css

压缩图片

1. image-webpack-loader 来压缩图片文件

// image-webpack-loader 使用 imagemin 来进行压缩
use: [
    'file-loader', // 需要在file-loader之后添加 image-webpack-loader
    {
   
      loader:  'image-webpack-loader',
        options: {
   
            // 压缩 jpg
            mozjpeg: {
   
              progressive:  true,
            },
            // 压缩 png
            optipng: {
   
              enabled:  false,  // 可以使用enabled：false来禁用优化器
            },
            // 压缩 png
            pngquant: {
   
              quality: [0.65, 0.90], // 达到或超过最大质量所需的最少颜色数量
              speed:  4
            },
            // 压缩 gif
            gifsicle: {
   
              interlaced:  false, // 渐进式渲染
            },
            // 压缩 jpg 和 png为 webp
            webp: {
   
              quality:  75 // 压缩质量
            }
         }
    }
]

需要注意的是：

1. image-webpack-loader 需要在 file-loader 之后添加
2. 默认情况下会自动启用
   jpg、png、gif、svg的优化器

压缩前后文件对比：
压缩前：

压缩后：

2. 使用 url-loader 将小图片转换为 base64 编码

{
   
    test: /.(png|jpg|gif)$/, 
    use: