webpack打包优化 ---- 2

下面我们继续介绍如何优化打包后输出文件的质量，也就是如何使打包出的文件尽可能的小，这样我们在加载文件的时候才能更快。

1 压缩JavaScript代码

在压缩JavaScript代码的时候我们需要先将代码解析成AST语法树，这个过程计算量非常大，我们常用的插件是webpack-u glify-parallel 。通过 webpack-uglify-parallel 我们可以将每个资源的压缩过程交给单独的进程，以此来提升整体的压缩效率。这个插件并不在 Webpack 内部，需要我们单独安装。配置方法也比较简单，如下：

    // os是nodeJs模块，提供一些基本的系统操作函数
    const os = require('os');
    const UglifyJsParallelPlugin = require('webpack-uglify-parallel');

    new UglifyJsParallelPlugin({
      //开启多进程
      workers: os.cpus().length,
      mangle: true,
      compressor: {
        //忽略警告
        warnings: false,
        //打开console
        drop_console: true,
        //打开debugger
        drop_debugger: true
       }
    })

2 压缩css代码

在WebPack3.x的时候推荐使用ExtractTextPlugin和cssnano，但是WebPack4.x已经淘汰了这2个配置项。WebPack4我们用MiniCssExtractPlugin和OptimizeCSSAssetsPlugin，具体配置如下：

    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,   // 分离css代码
              'css-loader',
            ],
          },
        ],
      },
      plugins:[
         new MiniCssExtractPlugin({
                filename: 'static/css/[name].[contenthash:8].css' //提取css存放目录
            }),
            new OptimizeCssAssetsPlugin()  // 使用OptimizeCssAssetsPlugin对CSS进行压缩
      ]
    }

3 压缩图片

图片在一般项目当中都是最大的静态资源，所以图片的压缩就显得非常重要。图片压缩插件我们常用的是imagemin-webpack-plugin。配置较为简单，如下：

    const ImageminPlugin = require('imagemin-webpack-plugin').default;
    module.exports = {
      plugins: [
          new ImageminPlugin({
            pngquant: {
              //指定压缩后的图片质量
              quality: '95-100'
            }
          })
      ]
    }

其他优化方案将会在另一篇文章中输出。。。。