【webpack系列】巧用webpack插件降低图片、css资源体积（实测简单好用）背景对于前端资源无非就是js、cs

背景

对于前端资源无非就是js、css和图片三大块，降低包体积也就是缩小这三大资源的体积。一般对于js的优化都比较重视，优化空间基本不大。但是对于图片和css应该还有不少优化空间。

图片

当分析页面性能数据时，图片大小总是首当其冲，同时对于图片的优化也是立竿见影。针对项目来说，图片是否压缩取决于FE是否进行无损压缩处理，靠人是很难保证的，还是需要工具去约束。

css

随着项目不断迭代及视觉改版，出现很多无用css，会大幅度增加了打包体积。

基于以上两点分析，对图片压缩和无用css进行优化。

解决思路

图片压缩

手动压缩图片：效率低且无法保证压缩效果
脚本自动压缩：（1）打包前：目录层级不统一，难以统一（2）打包后：目录层级统一，每次都需要执行该脚本较麻烦（3）打包时：利用webpack插件打包过程中压缩，最优方案

无用css

手动删除：效率低成本高，后续还是难以保证
自动删除：借助插件自动删除，成本低效率高但有一定误删风险

解决方案

通过调研，目前有不少类似插件，选择一个适合自己的即可。

图片

推荐webpack-image-compress-plugin插件完美支持，只需要安装该插件后配置即可，通过验证压缩比达到40%+。

注：该插件支持webpack4以上版本

删除无用css

推荐webpack-css-treeshaking-plugin 注：

对于拼接或者动画样式可能会误删，可以对该插件进行二次开发修改，支持过滤功能
需要修改webpack插件after-emit改成emit，参考二次开发

配置方式

vue-cli脚手架

vue.config.js文件中添加

// 图片压缩插件
const WebpackImageCompressPlugin = require('webpack-image-compress-plugin');
// 删除无用css
const CssTreeShakingPlugin = require('webpack-css-treeshaking-plugin');

module.exports = {
   chainWebpack: config => {
      config
          .plugin('webpack-image-compress-plugin')
          .use(WebpackImageCompressPlugin);
      config
        .plugin('css-treeShaking-plugin')
        .use(CssTreeShakingPlugin);

    }
}

webpack手动搭建

// 图片压缩插件
const WebpackImageCompressPlugin = require('webpack-image-compress-plugin');
// 删除无用css
const CssTreeShakingPlugin = require('webpack-css-treeshaking-plugin');

module.exports={
    plugins: [
        new WebpackImageCompressPlugin(),
        new CssTreeShakingPlugin()
    ]
}