Webpack 4教程 - 第七部分 減小打包體積與Tree Shaking

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://wanago.io/2018/08/13/webpack-4-course-part-seven-decreasing-the-bundle-size-with-tree-shaking/

在本次Webpack 4教程中，咱們會更進一步講述項目優化。咱們會學習什麼是tree shaking以及如何使用它。你會找到讓Webpack 4中tree shaking運做起來所須要的東西，並知道怎樣從中受益。開始吧！

首先，讓咱們來回答什麼是tree shaking以及它帶來什麼好處。咱們經常在文件中使用具名引入（named imports），這些引入的文件裏有其餘導出（exports）。在某些狀況下，咱們並無引入全部的導出，但Webpack仍會把整個模塊都導入進來。這種狀況下就須要使用tree shaking了，由於它能幫助咱們去除掉用不到的代碼。所以打包後的體積能顯著降低。

若是你想了解更多關於improts和exports的內容，請查看咱們的第一部分-入口、輸出和ES6模塊。

爲了讓tree shaking起做用，你須要知足一些配置要求。首先，必須使用ES 6模塊，而不是使用諸如CommonJS的模塊處理方式。若是你在使用Babel，這一點可能已讓你遇到麻煩了。由於Babel的預置默認把任何模塊轉譯成CommonJS模塊。你能夠簡單設置modules: false來解決此問題，在.babalrc或者webpack.config.js中設置均可以。

.babelrc

{

  "presets": [

    ["env",

      {

        "modules": false

      }

    ]

  ]

}

// webpack.config.js

module: {

  rules: [

    {

      test: /\.js$/,

        exclude: /(node_modules)/,

          use: {

            loader: 'babel-loader',

            options: {

              presets: ['env', { modules: false }]

            }

          }

    }

  ]

},

　　

若是你想閱讀更多babel-loader或常規loaders的內容，可查看教程的第二部分。

你須要使用UglifyJsPlugin。默認狀況下，它在mode: "produnction"是被啓用。若是你傾向於不使用mode: "produnction"，你能夠手動添加UglifyJsPlugin。

若是對UglifyJsPlugin不熟，可查看教程的第五部分。

還有一件記得作的事情是，你須要打開optimization.usedExports。它一樣在mode: "produnction"時被默認添加上去了。它告訴Webpack去決定每個模塊所用到的導出。有了它，Webpack會在你的打包產出裏添加額外的像是/* unused harmony export */之類的註釋，UglifyJsPlugin在以後會使用到它們。

Harmony是ES6和ES2015的代號。

讓咱們來研究有關例子。

// utilities.js

export function add(a, b) {

  return a + b;

}

 

export function subtract(a, b) {

  return a - b;

}

// index.js

import { add } from './utilities';

 

console.log(add(1,2));

console.log(add(3,4));

　　

以正常配置運行Webpack，咱們獲得像下面這樣的輸出：

/*(...)*/

 

/* 1 */

/***/ (function(module, __webpack_exports__, __webpack_require__) {

 

"use strict";

__webpack_require__.r(__webpack_exports__);

/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; });

/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "substract", function() { return substract; });

function add(a, b) {

  return a + b;

}

function subtract(a, b) {

  return a - b;

}

 

/***/ })

/******/ ]);

　　

正如你看到的，Webpack沒有對咱們的打包輸出進行tree-shaking。這裏同時有add和subtract方法。咱們來試驗一下，使用下面的配置：

// webpack.config.js

const webpack = require('webpack');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const UglifyJS = require('uglify-es');

 

const DefaultUglifyJsOptions = UglifyJS.default_options();

const compress = DefaultUglifyJsOptions.compress;

for(let compressOption in compress) {

  compress[compressOption] = false;

}

compress.unused = true;

 

module.exports = {

  mode: 'none',

  optimization: {

    minimize: true,

    minimizer: [

      new UglifyJsPlugin({

        uglifyOptions: {

          compress,

          mangle: false,

          output: {

            beautify: true

          }

        },

      })

    ],

  }

}

　　

我已經關掉了大部分UglifyJsPlugin的配置，以便於咱們清楚地看到咱們的代碼發生了什麼。使用上面的配置運行，獲得下面輸出：

/* (...) */

 

/* 0 */

/***/ function() {

  "use strict";

  // CONCATENATED MODULE: ./src/utilities.js

  function add(a, b) {

    return a + b;

  }

  // CONCATENATED MODULE: ./src/index.js

  console.log(add(1, 2));

  console.log(add(3, 4));

  /***/}

/******/ ]);

　　

因爲使用了UglifyJsPlugin的optimization.usedExports和unused選項，不須要的代碼被移除了。請注意，那是UglifyJsPlugin的默認行爲，因此使用默認配置也能去除無用的代碼（固然這樣還會進行其餘壓縮處理）。

Tree shaking函數庫

若是你打算對函數庫進行tree shaking，你須要記得上一段提到的是事情：使用ES6模塊，而它並非老是被函數庫使用。一個絕佳的例子是lodash。若是你去看它提供的產品代碼，能夠清楚地看到它並無使用ES6模塊。

試想咱們打算使用lodash提供的debounce方法。

// index.js

import _ from 'lodash';

 

console.log(_.debounce);

　　

如今你的輸出裏包含了整個lodash庫。當使用import _ from 'lodash'時，這沒法避免。但不要擔憂！有人已經思考過此問題，並建立了一個包叫作lodash-es。它以ES6模塊的形式提供了lodash庫。

import { debounce } from 'lodash';

 

console.log(debounce);

　　

不幸的是，Webpack會tree shaking失敗。按照ECMAScript規範，全部子模塊都須要被評估，由於它們可能包含反作用（side effects）。我推薦閱讀一篇Stack Overflow上Sean Larking的好文章（他是Webpack核心團隊的成員）。若是一個包的做者想要提供信息以標識它的庫沒有反作用，他能夠在包的package.json文件裏作這件事情。若是你查看lodash代碼庫的package.json文件，你能夠看到它有一個"sideEffects: false"。那麼問題出在哪兒呢？

Webpac默認會忽略sideEffect標識。若是想改變這種行爲，咱們須要吧optimization.sideEffects設置成true。你能夠手動設置，或者經過mode: "produnction"實現。

// webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');

 

module.exports = {

  mode: 'none',

    optimization: {

      minimize: true,

      minimizer: [

        new UglifyJsPlugin()

      ],

      usedExports: true,

      sideEffects: true

    },

  plugins: [

    new HtmlWebpackPlugin()

  ]

}

　　

如今lodash庫可以被Webpack進行tree shaking了。

總結

爲了使tree shaking起做用，須要知足許多條件。它是個頗有用的特性，固然也值得學習。但願你經過本文了解如何使用它，讓打包後的體積大幅減少。記住你須要使用ES6模塊和UglifyJsPlugin。另外，記得配置optimization，把usedExports和sideEffects設爲true。