溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：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中設置都可以。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | .babelrc{ "presets": [ ["env", { "modules": false } ] ]}// webpack.config.jsmodule: { 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的代號。
讓我們來研究有關例子。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | // utilities.jsexport function add(a, b) { return a + b;} export function subtract(a, b) { return a - b;}// index.jsimport { add } from './utilities'; console.log(add(1,2));console.log(add(3,4)); |
以正常配置運行Webpack，我們得到像下面這樣的輸出：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /*(...)*/ /* 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方法。我們來試驗一下，使用下面的配置：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | // webpack.config.jsconst 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的配置，以便于我們清楚地看到我們的代碼發生了什么。使用上面的配置運行，得到下面輸出：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | /* (...) */ /* 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，你需要記得上一段提到的是事情：使用ES6模塊，而它并不是總是被函數庫使用。一個絕佳的例子是lodash。如果你去看它提供的產品代碼，可以清楚地看到它并沒有使用ES6模塊。
試想我們打算使用lodash提供的debounce方法。
1 2 3 4 5 6 7 | // index.jsimport _ from 'lodash'; console.log(_.debounce); |
現在你的輸出里包含了整個lodash庫。當使用import _ from 'lodash'時，這無法避免。但不要擔心！有人已經思考過此問題，并創建了一個包叫做lodash-es。它以ES6模塊的形式提供了lodash庫。
1 2 3 4 5 | 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"實現。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | // webpack.config.jsconst 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。
本文是由葡萄城技術開發團隊發布，轉載請注明出處：葡萄城官網
了解開放易用的 Web 生成平臺，請前往活字格Web應用生成平臺
了解可嵌入您系統的在線 Excel，請前往SpreadJS純前端表格控件
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
