09优化1-静态资源压缩

图片加载优化和代码压缩

我们总是希望浏览器在加载页面时用的时间越短越好，所以构建出来的文件应该越少越小越好，一来减少浏览器需要发起请求的数量，二来减少下载静态资源的时间。

其实 webpack 把多个代码文件打包成几个必需的静态资源，已经很大程度减少了静态资源请求数量了，接下来我们来介绍下如何使用 webpack 实现更多的前端资源加载的优化需求。

图片压缩

我们之前提及使用 file-loader 来处理图片文件，在此基础上，我们再添加一个 image-webpack-loader 来压缩图片文件。简单的配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(gif|png|jpe?g|svg|webp)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {}
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                // 压缩jpg设置
                progrssive: true,
                quality: 60
              },
              options: {
                // 使用imagemin-optipng压缩png, enable: false为关闭
                enabled: false
              },
              pngquant: {
                // 使用imagemin-optipng压缩png
                quality: '65-90',
                speed: 4
              },
              gifsicle: {
                // 压缩gif配置
                interlaced: false
              },
              webp: {
                // 开启webp，会把jpg和png图片压缩为webp格式
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
}

image-webpack-loader 的压缩是使用 imagemin 提供的一系列图片压缩类库来处理的，如果需要进一步了解详细的配置，可以查看对应类库的官方文档 usage of image-webpack-loader

使用DateURL

url-loader和file-loader功能类似，但在处理文件时，可指定大小，一些小图我们可以用url处理，配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240 // 处理10k内的
            }
          }
        ]
      }
    ]
  }
}

代码压缩

webpack 4.x production环境会自动压缩JS代码，但css和html没有经过压缩，我们需要html-webpack-plugin插件来帮助其配置:

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 配置输出文件名和路径
      template: 'assets/index.html', // 配置文件模版
      minify: { // 压缩html设置
        minifyCSS: true, // 压缩html出现的css代码
        minifyJS: true // 压缩出现的js代码
      }
    })
  ]
}

如上，使用 minify 字段配置就可以使用 HTML 压缩，这个插件是使用 html-minifier 来实现 HTML 代码压缩的，minify 下的配置项直接透传给 html-minifier，配置项参考 html-minifier 文档即可。

对于 CSS 文件，我们之前介绍过用来处理 CSS 文件的 css-loader，也提供了压缩 CSS 代码的功能：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              minimize: true
            }
          }
        ]
      }
    ]
  }
}

在 css-loader 的选项中配置 minimize 字段为 true 来使用 CSS 压缩代码的功能。css-loader 是使用 cssnano 来压缩代码的，minimize 字段也可以配置为一个对象，来将相关配置传递给 cssnano。更多详细内容请参考 cssnano 官方文档