在本次Webpack 4教程中，我們會更進一步講述項目優化。我們會學習什麼是tree shaking以及如何使用它。你會找到讓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。
