溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-07-20 21:19:17 來源：網(wǎng)絡(luò) 閱讀：693 作者：powertoolsteam 欄目：web開發(fā)

轉(zhuǎn)載請注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù)，賦能開發(fā)者。
原文出處：https://wanago.io/2018/08/13/webpack-4-course-part-seven-decreasing-the-bundle-size-with-tree-shaking/

在本次Webpack 4教程中，我們會更進(jìn)一步講述項目優(yōu)化。我們會學(xué)習(xí)什么是tree shaking以及如何使用它。你會找到讓W(xué)ebpack 4中tree shaking運(yùn)作起來所需要的東西，并知道怎樣從中受益。開始吧！

首先，讓我們來回答什么是tree shaking以及它帶來什么好處。我們常常在文件中使用具名引入（named imports），這些引入的文件里有其他導(dǎo)出（exports）。在某些情況下，我們并沒有引入所有的導(dǎo)出，但Webpack仍會把整個模塊都導(dǎo)入進(jìn)來。這種情況下就需要使用tree shaking了，因為它能幫助我們?nèi)コ粲貌坏降拇a。因此打包后的體積能顯著下降。

如果你想了解更多關(guān)于improts和exports的內(nèi)容，請查看我們的第一部分-入口、輸出和ES6模塊。

為了讓tree shaking起作用，你需要滿足一些配置要求。首先，必須使用ES 6模塊，而不是使用諸如CommonJS的模塊處理方式。如果你在使用Babel，這一點可能已讓你遇到麻煩了。因為Babel的預(yù)置默認(rèn)把任何模塊轉(zhuǎn)譯成CommonJS模塊。你可以簡單設(shè)置modules: false來解決此問題，在.babalrc或者webpack.config.js中設(shè)置都可以。

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.js
 
module: {
 
  rules: [
 
    {
 
      test: /\.js$/,
 
        exclude: /(node_modules)/,
 
          use: {
 
            loader: 'babel-loader',
 
            options: {
 
              presets: ['env', { modules: false }]
 
            }
 
          }
 
    }
 
  ]
 
},

　　

如果你想閱讀更多babel-loader或常規(guī)loaders的內(nèi)容，可查看教程的第二部分。

你需要使用UglifyJsPlugin。默認(rèn)情況下，它在mode: "produnction"是被啟用。如果你傾向于不使用mode: "produnction"，你可以手動添加UglifyJsPlugin。

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

還有一件記得做的事情是，你需要打開optimization.usedExports。它同樣在mode: "produnction"時被默認(rèn)添加上去了。它告訴Webpack去決定每一個模塊所用到的導(dǎo)出。有了它，Webpack會在你的打包產(chǎn)出里添加額外的像是/* unused harmony export */之類的注釋，UglifyJsPlugin在之后會使用到它們。

Harmony是ES6和ES2015的代號。

讓我們來研究有關(guān)例子。

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.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));

　　

以正常配置運(yùn)行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沒有對我們的打包輸出進(jìn)行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.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
 
          }
 
        },
 
      })
 
    ],
 
  }
 
}

　　

我已經(jīng)關(guān)掉了大部分UglifyJsPlugin的配置，以便于我們清楚地看到我們的代碼發(fā)生了什么。使用上面的配置運(yùn)行，得到下面輸出：

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的默認(rèn)行為，所以使用默認(rèn)配置也能去除無用的代碼（當(dāng)然這樣還會進(jìn)行其他壓縮處理）。

Tree shaking函數(shù)庫

如果你打算對函數(shù)庫進(jìn)行tree shaking，你需要記得上一段提到的是事情：使用ES6模塊，而它并不是總是被函數(shù)庫使用。一個絕佳的例子是lodash。如果你去看它提供的產(chǎn)品代碼，可以清楚地看到它并沒有使用ES6模塊。

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

1
2
3
4
5
6
7
// index.js
 
import _ from 'lodash';
 
  
 
console.log(_.debounce);

　　

現(xiàn)在你的輸出里包含了整個lodash庫。當(dāng)使用import _ from 'lodash'時，這無法避免。但不要擔(dān)心！有人已經(jīng)思考過此問題，并創(chuàng)建了一個包叫做lodash-es。它以ES6模塊的形式提供了lodash庫。

1
2
3
4
5
import { debounce } from 'lodash';
 
  
 
console.log(debounce);

　　

不幸的是，Webpack會tree shaking失敗。按照ECMAScript規(guī)范，所有子模塊都需要被評估，因為它們可能包含副作用（side effects）。我推薦閱讀一篇Stack Overflow上Sean Larking的好文章（他是Webpack核心團(tuán)隊的成員）。如果一個包的作者想要提供信息以標(biāo)識它的庫沒有副作用，他可以在包的package.json文件里做這件事情。如果你查看lodash代碼庫的package.json文件，你可以看到它有一個"sideEffects: false"。那么問題出在哪兒呢？

Webpac默認(rèn)會忽略sideEffect標(biāo)識。如果想改變這種行為，我們需要吧optimization.sideEffects設(shè)置成true。你可以手動設(shè)置，或者通過mode: "produnction"實現(xiàn)。

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.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()
 
  ]
 
}

　　

現(xiàn)在lodash庫能夠被Webpack進(jìn)行tree shaking了。

總結(jié)

為了使tree shaking起作用，需要滿足許多條件。它是個很有用的特性，當(dāng)然也值得學(xué)習(xí)。希望你通過本文了解如何使用它，讓打包后的體積大幅減小。記住你需要使用ES6模塊和UglifyJsPlugin。另外，記得配置optimization，把usedExports和sideEffects設(shè)為true。

 


本文是由葡萄城技術(shù)開發(fā)團(tuán)隊發(fā)布，轉(zhuǎn)載請注明出處：葡萄城官網(wǎng)

了解開放易用的 Web 生成平臺，請前往活字格Web應(yīng)用生成平臺

了解可嵌入您系統(tǒng)的在線 Excel，請前往SpreadJS純前端表格控件


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手