深刻淺出webpack學習(19)--壓縮代碼

壓縮代碼

瀏覽器從服務器訪問網頁時獲取的JavaScript，css資源都是文本形式的，文件越大網頁加載時間越長。 爲了提高網頁加速速度和減小網絡傳輸流量， 能夠對這些資源進行壓縮。 壓縮的方法除了能夠經過GIZP算法對文件壓縮外，還能夠對文本自己壓縮。

對文本自己進行壓縮的做用除了有提高網頁加載速度的優點外， 還具備混淆代碼的做用。 因爲壓縮後的代碼可讀性很是差， 就算別人下載到網頁的代碼，也大大增長了代碼分析和改造的難度。

壓縮JavaScript

目前最成熟的JavaScript壓縮工具就是UglifyJS， 它會分析JavaScript的代碼語法樹， 理解代碼含義， 從而能作到諸如去掉無效代碼，去掉日誌輸出代碼，縮短變量名等優化。

要在webpack中接入UglifyJS須要經過插件的形式，目前有兩個成熟的插件，分別是：

UglifyJsPlugin: 經過封裝UglifyJS實現壓縮。
 ParalleUglifyPlugin: 多進程並行處理壓縮

UglifyJS提供了很是多的選擇用於配置在壓縮過程當中採用哪些規則，咱們挑出一些經常使用的拿出來詳細講解一下

• sourceMap：是否爲壓縮後的代碼生成對用的SourceMap， 默認不生成，開啓後耗時會大大增長。通常不會把壓縮後的代碼SouceMap發送給網站用戶的瀏覽器，而是用於內部開發人員調試線上代碼時使用。
• beautify：是否輸出可讀性較強的代碼，會保留空格和製表符，默認爲是，爲了達到更好的壓縮效果，能夠設置爲false。
• comments：是否保留代碼中的註釋， 默認保留， 爲了達到壓縮更好的壓縮效果，能夠設置爲false。
• compress.warnings：是否在UglifyJS刪除沒有用到的代碼時輸出警告信息，默認爲輸出。能夠設置爲false以關閉這些不大的警告。
• drop_console：是否剔除代碼中全部的console語句，默認不剔除，開啓後不只能夠提高代壓縮效果，也能夠兼容不支持console語句IE瀏覽器。
• collapse_vars:是否內嵌定義了可是隻永達一次的變量，例如把var x=5; y=x抓換成 y=5, 默認不轉換。爲了達到更好的壓縮效果，能夠設置爲false。
• reduce_vars：是否提取出出現屢次可是沒有定義成變量去引用的靜態值。

也就是說，在不影響代碼正確執行的前提下，最優化的代碼壓縮配置爲以下：

const UglifyJSPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

module.exports = {
  plugins: [
    // 壓縮輸出的 JS 代碼
    new UglifyJSPlugin({
      compress: {
        // 在UglifyJs刪除沒有用到的代碼時不輸出警告
        warnings: false,
        // 刪除全部的 `console` 語句，能夠兼容ie瀏覽器
        drop_console: true,
        // 內嵌定義了可是隻用到一次的變量
        collapse_vars: true,
        // 提取出出現屢次可是沒有定義成變量去引用的靜態值
        reduce_vars: true,
      },
      output: {
        // 最緊湊的輸出
        beautify: false,
        // 刪除全部的註釋
        comments: false,
      }
    }),
  ],
};

壓縮CSS

CSS代碼也能夠像JavaScript那樣被壓縮，目前比較成熟的css壓縮工具備cssnano,基於PostCSS.

cssnano能理解css代碼的含義，而不單單是刪除空格。

把cssnano接入到webpack中也很簡單，由於css-loader已經將其內置了，要開啓cssnan去壓縮代碼只須要開啓css-loader的minimize選項。

const path = require('path');
const {WebPlugin} = require('web-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css/,// 增長對 CSS 文件的支持
        // 提取出 Chunk 中的 CSS 代碼到單獨的文件中
        use: ExtractTextPlugin.extract({
          // 經過 minimize 選項壓縮 CSS 代碼
          use: ['css-loader?minimize']
        }),
      },
    ]
  },
  plugins: [
    // 用 WebPlugin 生成對應的 HTML 文件
    new WebPlugin({
      template: './template.html', // HTML 模版文件所在的文件路徑
      filename: 'index.html' // 輸出的 HTML 的文件名稱
    }),
    new ExtractTextPlugin({
      filename: `[name]_[contenthash:8].css`,// 給輸出的 CSS 文件名稱加上 Hash 值
    }),
  ],
};