webpack2-minifying（压缩代码）

今天学习的是压缩代码章节，原文连接：webpack2

启用性能预算（Performance Budget）限制构建出的bundle大小。

在 webpack.config.js 中配置

const productionConfig = merge([

  {
    performance: {
      hints: 'warning', // 'error' or false are valid too
      maxEntrypointSize: 100000, // in bytes
      maxAssetSize: 450000, // in bytes
    },
  },

  ...
]);

上述配置限制了bundles的entry和asset的文件大小，若是超过设置值，构建将报错并取消build过程，不然报错不会出现而且build成功。

压缩Javascript.

压缩代码的目的是将代码体积变小一些。压缩代码的靠谱方式就是重写的同时不会致使代码（功能）失效，好的方式好比：对变量重命名和删除无效代码段。

我么可使用webpack -p 即 --optimize-minimize 来压缩代码，这个命令的底层调用的 UglifyJsPlugin 插件，因为_UglifyJS _不支持ES6语法，针对浏览器使用 _Babel _ 和 babel-preset-env 的状况下仍是会出问题，所以咱们须要另辟蹊径了。

babili是由_babel_团队维护的一个压缩器(minifier)--支持ES6甚至更新的特性，在webpack中咱们能够经过 babili-webpack-plugin来运用该工具。

npm下载该插件

npm install babili-webpack-plugin --save-dev

在_webpack.parts.js_中定义该插件使用

const BabiliPlugin = require('babili-webpack-plugin');
...
exports.minifyJavaScript = () => ({
  plugins: [
    new BabiliPlugin(),
  ],
});

该插件功能强大，可是咱们只须要能切换source map就足够了。接下来咱们在_webpack.config.js_中应用上面的插件定义：

const productionConfig = merge([
  ...
  parts.clean(PATHS.build),
  parts.minifyJavaScript(),
  ...
]);

鉴于该插件的使用致使了更多的工做，因此构建时间更长，可是好处是明显的：性能预算中的超出size大小的限制取消了，而且构建出的bundle体积减少了许多。更过设置能够参考_babili-webpack-plugin_ 和Babili 官方文档，其中包含注释代码的配置项。

更多关于压缩js的webpack插件见该原文连接！

压缩CSS.

1. _css-loader_能够经过cssnano来压缩代码，前提是你必须明确的配置 minimize 参数(options) 你也能够在query后面加上 _cssnano特定参数_来定制化更过功能。
2. clean-css-loader可使用很是流行的css压缩器clean-css来压缩css。
3. _ optimize-css-assets-webpack-plugin_可以分组压缩css代码，而且能够消除_ExtractTextPlugin _致使的重复性的css代码。

其中_ optimize-css-assets-webpack-plugin_是这几个里面的最好方案。首先下载该插件：

npm install optimize-css-assets-webpack-plugin cssnano --save-dev

在_webpack.parts.js_中定义该插件的配置：

...
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const cssnano = require('cssnano');
...
exports.minifyCSS = ({ options }) => ({
  plugins: [
    new OptimizeCSSAssetsPlugin({
      cssProcessor: cssnano,
      cssProcessorOptions: options,
      canPrint: false,
    }),
  ],
});

在_webpack.config.js_中使用该插件的定义：

const productionConfig = merge([
  ...
  parts.minifyJavaScript(),
  parts.minifyCSS({
    options: {
      discardComments: {
        removeAll: true,
      },
      // Run cssnano in safe mode to avoid
      // potentially unsafe transformations.
      safe: true,
    },
  }),
  ...
]);

跑一下npm run build，css体积变小了