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體積變小了