溫馨提示×

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

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

Webpack 4教程：為什么要優(yōu)化代碼

發(fā)布時(shí)間：2020-07-01 21:57:21 來源：網(wǎng)絡(luò) 閱讀：315 作者：powertoolsteam 欄目：web開發(fā)

轉(zhuǎn)載請(qǐng)注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù)，賦能開發(fā)者。
原文出處：https://wanago.io/2018/07/30/webpack-4-course-part-five-built-in-optimization-for-production/

在本次Wepack 4教程，我們會(huì)聚焦通過壓縮輸出內(nèi)容，來提升你應(yīng)用的用戶體驗(yàn)。這意味著，生產(chǎn)環(huán)境需要一套不同的做法。今天，我們將通過mode參數(shù)來講述Webpack內(nèi)置的優(yōu)化功能。開始吧！

首先，讓我們來回答究竟為什么要優(yōu)化代碼。如果你遵循良好的代碼實(shí)踐，你可能會(huì)致力于將代碼寫得容易閱讀，所以你會(huì)添加很多空白符（tab、空格和空行）和注釋。它讓代碼更好讀，但也讓文件變大了。另一方面，為了用戶體驗(yàn)而犧牲可閱讀性，這是不可取的。要在生產(chǎn)環(huán)境手動(dòng)刪除無用代碼是非常繁瑣的事情。因此，對(duì)這個(gè)問題已有了現(xiàn)成的解決方案，你可以在項(xiàng)目中拿來就用。

生產(chǎn)環(huán)境模式

mode是Webpack 4引入的一個(gè)參數(shù)。自此，就需要在配置中設(shè)置它。如果不配置它，會(huì)得到一個(gè)警告，并應(yīng)用上默認(rèn)值production。如果使用了mode: "produnction"，Webpack會(huì)為你設(shè)置一些相關(guān)配置。因此，你的打包輸出會(huì)更好地用于生產(chǎn)環(huán)境。我們會(huì)一步步學(xué)習(xí)它具體為我們做了什么事。

UglifyJsPlugin

把mode設(shè)置為produnction會(huì)為我們的配置添加UglifyJsPlugin插件。它通過壓縮代碼讓其更小和更快。從簡單的任務(wù)，比如縮減你的變量名或者刪除多余的空白，到刪除冗余代碼，它都能做到。默認(rèn)情況下，它會(huì)解析每一個(gè) .js 文件。我們會(huì)在本文介紹UglifyJsPlugin最基本的配置。雖然Webpack 4根據(jù)選擇的mode為你做了優(yōu)化，但你仍然可以通過optimization屬性配置它。

1

2

3

4

5

6

7

8

9

10

11

12

13

// webpack.config.js

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

 

module.exports = {

  mode: "production",

  // 使用 mode: "production" 后會(huì)添加下面的配置：

  optimization: {

    minimize: true,

      minimizer: [

        new UglifyJsPlugin()

      ]

    },

};

你能傳給UglifyJsPlugin的最重要的屬性叫做uglifyOptions。它有許多默認(rèn)的配置。其中一個(gè)最值得注意的部分是compress屬性。

1

2

3

4

5

6

7

8

// webpack.config.js

new UglifyJsPlugin({

  uglifyOptions: {

    compress: {

      /*(...)*/

    }

  }

});

它負(fù)責(zé)配置UglifyJsPlugin所做的許多重量級(jí)工作，以讓你的代碼更精簡。你可以在官方列表查看完整的可用配置。它也有一些默認(rèn)值。

另一個(gè)UglifyJsPlugin配置的重要屬性是output　　

1

2

3

4

5

6

7

8

9

10

new UglifyJsPlugin({

  uglifyOptions: {

    compress: {

      /*(...)*/

    },

    output: {

      /*(...)*/

    }

  }

})

默認(rèn)情況下，輸出的代碼會(huì)盡可能的簡短。你可以配置output來改變這種行為。你可能不會(huì)想要修改大部分的默認(rèn)配置，但是有一個(gè)值得考慮的屬性是drop_console，它默認(rèn)設(shè)置為false。把它改為true將會(huì)去除所有的console.log調(diào)用。若想了解更多關(guān)于output的配置，請(qǐng)查看完整列表。

UglifyJsPlugin有很多可選配置。你可以在Github上的文檔里看到所有這些。

DefinePlugin

這個(gè)插件允許你在編譯時(shí)創(chuàng)建全局常量。如果你使用mode: "produnction"，Webpack會(huì)默認(rèn)設(shè)置上： "process.env.NODE_ENV": JSON.stringify("produnction")?！　?/p>

1

2

3

4

5

6

7

8

9

10

// webpack.config.js

module.exports = {

  mode: "production",

  // 使用 mode: "production" 會(huì)添加以下內(nèi)容：

  plugins: [

    new webpack.DefinePlugin({

      "process.env.NODE_ENV": JSON.stringify("production")

    }),

  ]

}

注意，由于是純文本的替換，傳給此屬性的值必須用引號(hào)括起來。它可以通過JSON.stringify("produnction")或者'"produnction"'實(shí)現(xiàn)。

在編譯時(shí)解析它，意味著如果你在代碼中使用了process.env.NODE_ENV，它將會(huì)被替換為"produnction"?！　?/p>

1

2

3

4

console.log(process.env.NODE_ENV);

if(process.env.NODE_ENV === 'production') {

  console.log('this is production!');

}

請(qǐng)記住，process.env.NODE_ENV的值在編譯之后不會(huì)被保留。使用Webpack處理上面的代碼，會(huì)得到：

1

2

3

4

console.log("production");

if(true) {

  console.log("this is production!");

}

在經(jīng)過UglifyJsPlugin的最小化處理之后，它得到簡化。

1

2

console.log("production");

console.log("this is production!");

NoEmitOnErrorsPlugin

這個(gè)插件會(huì)幫你處理編譯時(shí)的錯(cuò)誤。例如，你可能會(huì)嘗試導(dǎo)入Webpack不能解析的某個(gè)文件。在這種情況下，Webpack會(huì)為應(yīng)用創(chuàng)建一個(gè)包含錯(cuò)誤信息的版本。使用NoEmitOnErrorsPlugin插件后，這個(gè)錯(cuò)誤信息版本根本就不會(huì)被創(chuàng)建。　　

1

2

3

4

5

6

7

8

9

10

// webpack.config.js

const webpack = require('webpack');

 

module.exports = {

  mode: "produnction",

  // 使用mode: produnction，會(huì)添加如下的配置

  plugins: [

    new webpack.NoEmitOnErrorsPlugin()

  ]

}

ModuleConcatenationPlugin

默認(rèn)情況下，Webpack創(chuàng)建單獨(dú)的閉包來包含每個(gè)模塊。這個(gè)包裹函數(shù)會(huì)輕微地減緩你代碼的運(yùn)行速度。請(qǐng)看這個(gè)例子：　　

1

2

3

4

5

6

7

8

9

10

11

12

// one.js

const dog = 'Fluffy';

export const one = 1;

// two.js

const dog = 'Fluffy';

export const two = 2;

// index.js

import { one } from './one';

import { two } from './two';

const dog = 'Fluffy';

 

console.log(one, two);

如果沒有ModuleConcatenationPlugin，輸出的包看起來像這樣：　　

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

// main.js

(function(module, __webpack_exports__, __webpack_require__) {

 

"use strict";

__webpack_require__.r(__webpack_exports__);

/* harmony import */ var _one__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);

/* harmony import */ var _two__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);

 

const dog = 'Fluffy';

 

console.log(_one__WEBPACK_IMPORTED_MODULE_0__["one"], _two__WEBPACK_IMPORTED_MODULE_1__["two"]);

 

/***/ }),

/* 1 */

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

 

"use strict";

__webpack_require__.r(__webpack_exports__);

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

const dog = 'Fluffy';

const one = 1;

 

 

/***/ }),

/* 2 */

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

 

"use strict";

__webpack_require__.r(__webpack_exports__);

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

const dog = 'Fluffy';

const two = 2;

 

/***/ })

/******/ ]);

當(dāng)你把mode設(shè)為production，此插件就開始工作了。這樣一來，輸出的包現(xiàn)在都在一個(gè)scope里了。更少的函數(shù)意味著更少的運(yùn)行時(shí)開銷。

注意，我在這個(gè)例子中沒有使用任何優(yōu)化配置。由于優(yōu)化器其實(shí)已經(jīng)知道模塊之間的內(nèi)部依賴，它能更好地完成任務(wù)?！　?/p>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

// main.js

(function(module, __webpack_exports__, __webpack_require__) {

 

"use strict";

 

// 串起來的模塊: ./src/one.js

const dog = 'Fluffy';

const one = 1;

 

// 串起來的模塊: ./src/two.js

const two_dog = 'Fluffy';

const two = 2;

// 串起來的模塊: ./src/index.js

 

const src_dog = 'Fluffy';

 

console.log(one, two);

/***/ })

/******/ ]);

如果你覺得感興趣，可查看webpack博客上的這篇文章，它對(duì)此給出了更多信息。

總結(jié)

今天我們學(xué)習(xí)了Webpack能通過設(shè)置mode: "produnction"做的內(nèi)置優(yōu)化。這能使你的應(yīng)用加載更快，性能更好。它通過配置一系列打包流程，以滿足你生產(chǎn)環(huán)境的要求。本教程的下一部分，我們將介紹mode的development配置。敬請(qǐng)期待！


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

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

AI
助
手