2. 程式人生 > >Webpack 4教程：為什麼要優化程式碼

Webpack 4教程：為什麼要優化程式碼

阿新 • • 發佈：2019-03-01

浪費了“黃金五年”的Java程式設計師，還有救嗎？ >>>   

轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://wanago.io/2018/07/30/webpack-4-course-part-five-built-in-optimization-for-production/

在本次Wepack 4教程，我們會聚焦通過壓縮輸出內容，來提升你應用的使用者體驗。這意味著，生產環境需要一套不同的做法。今天，我們將通過mode

引數來講述Webpack內建的優化功能。開始吧！

首先，讓我們來回答究竟為什麼要優化程式碼。如果你遵循良好的程式碼實踐，你可能會致力於將程式碼寫得容易閱讀，所以你會新增很多空白符（tab、空格和空行）和註釋。它讓程式碼更好讀，但也讓檔案變大了。另一方面，為了使用者體驗而犧牲可閱讀性，這是不可取的。要在生產環境手動刪除無用程式碼是非常繁瑣的事情。因此，對這個問題已有了現成的解決方案，你可以在專案中拿來就用。

生產環境模式

mode是Webpack 4引入的一個引數。自此，就需要在配置中設定它。如果不配置它，會得到一個警告，並應用上預設值production。如果使用了mode: "produnction"，Webpack會為你設定一些相關配置。因此，你的打包輸出會更好地用於生產環境。我們會一步步學習它具體為我們做了什麼事。

UglifyJsPlugin

把mode設定為produnction會為我們的配置新增UglifyJsPlugin外掛。它通過壓縮程式碼讓其更小和更快。從簡單的任務，比如縮減你的變數名或者刪除多餘的空白，到刪除冗餘程式碼，它都能做到。預設情況下，它會解析每一個 .js 檔案。我們會在本文介紹UglifyJsPlugin最基本的配置。雖然Webpack 4根據選擇的mode為你做了優化，但你仍然可以通過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" 後會新增下面的配置：

  optimization: {

    minimize: true,

      minimizer: [

        new UglifyJsPlugin()

      ]

    },

};

你能傳給UglifyJsPlugin的最重要的屬性叫做uglifyOptions。它有許多預設的配置。其中一個最值得注意的部分是compress屬性。

1

2

3

4

5

6

7

8

// webpack.config.js

new UglifyJsPlugin({

  uglifyOptions: {

    compress: {

      /*(...)*/

    }

  }

});

它負責配置UglifyJsPlugin所做的許多重量級工作，以讓你的程式碼更精簡。你可以在官方列表檢視完整的可用配置。它也有一些預設值。

另一個UglifyJsPlugin配置的重要屬性是output　　

1

2

3

4

5

6

7

8

9

10

new UglifyJsPlugin({

  uglifyOptions: {

    compress: {

      /*(...)*/

    },

    output: {

      /*(...)*/

    }

  }

})

預設情況下，輸出的程式碼會盡可能的簡短。你可以配置output來改變這種行為。你可能不會想要修改大部分的預設配置，但是有一個值得考慮的屬性是drop_console，它預設設定為false。把它改為true將會去除所有的console.log呼叫。若想了解更多關於output的配置，請檢視完整列表。

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

DefinePlugin

這個外掛允許你在編譯時建立全域性常量。如果你使用mode: "produnction"，Webpack會預設設定上： "process.env.NODE_ENV": JSON.stringify("produnction")。　　

1

2

3

4

5

6

7

8

9

10

// webpack.config.js

module.exports = {

  mode: "production",

  // 使用 mode: "production" 會新增以下內容：

  plugins: [

    new webpack.DefinePlugin({

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

    }),

  ]

}

注意，由於是純文字的替換，傳給此屬性的值必須用引號括起來。它可以通過JSON.stringify("produnction")或者'"produnction"'實現。

在編譯時解析它，意味著如果你在程式碼中使用了process.env.NODE_ENV，它將會被替換為"produnction"。　　

1

2

3

4

console.log(process.env.NODE_ENV);

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

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

}

請記住，process.env.NODE_ENV的值在編譯之後不會被保留。使用Webpack處理上面的程式碼，會得到：

1

2

3

4

console.log("production");

if(true) {

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

}

在經過UglifyJsPlugin的最小化處理之後，它得到簡化。

1

2

console.log("production");

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

NoEmitOnErrorsPlugin

這個外掛會幫你處理編譯時的錯誤。例如，你可能會嘗試匯入Webpack不能解析的某個檔案。在這種情況下，Webpack會為應用建立一個包含錯誤資訊的版本。使用NoEmitOnErrorsPlugin外掛後，這個錯誤資訊版本根本就不會被建立。　　

1

2

3

4

5

6

7

8

9

10

// webpack.config.js

const webpack = require('webpack');

 

module.exports = {

  mode: "produnction",

  // 使用mode: produnction，會新增如下的配置

  plugins: [

    new webpack.NoEmitOnErrorsPlugin()

  ]

}

ModuleConcatenationPlugin

預設情況下，Webpack建立單獨的閉包來包含每個模組。這個包裹函式會輕微地減緩你程式碼的執行速度。請看這個例子：　　

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;

 

/***/ })

/******/ ]);

當你把mode設為production，此外掛就開始工作了。這樣一來，輸出的包現在都在一個scope裡了。更少的函式意味著更少的執行時開銷。

注意，我在這個例子中沒有使用任何優化配置。由於優化器其實已經知道模組之間的內部依賴，它能更好地完成任務。　　

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部落格上的這篇文章，它對此給出了更多資訊。

總結

今天我們學習了Webpack能通過設定mode: "produnction"做的內建優化。這能使你的應用載入更快，效能更好。它通過配置一系列打包流程，以滿足你生產環境的要求。本教程的下一部分，我們將介紹mode的development配

相關推薦

Webpack 4教程：為什麼要優化程式碼

浪費了“黃金五年”的Java程式設計師，還有救嗎？ >>>   

Webpack 4 教程：從0配置到生產模式

webpack 4 問世了！除了大幅度的效能提升，而且增加了零配置的預設設定。 目錄 webpack 4 ，零配置的模組打包工具 webpack 是一個強力和有著很多獨特功能的工具，但是他的一大痛點在於他的配置檔案 如果是大中型專案我新增配置檔案沒什麼

webpack4學習（React）--重點細節整理筆記（Webpack 4 教程：從零配置到生產釋出--http://www.css88.com）

一、開始配置webpack4開發環境   cmd開啟操作介面 mkdir 檔名 && cd 檔名   ------建立專案並進入專案目錄 npm init -y   ------初始化建立package.json檔案，-y的意思是初始化時全部選擇yes，

Webpack 4教程 - 第八部分 使用prefetch和preload進行動態載入

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

Webpack 4 Tree Shaking 終極優化指南

幾個月前，我的任務是將我們組的 Vue.js 專案構建配置升級到 Webpack 4。我們的主要目標之一是利用 tree-shaking 的優勢，即 Webpack 去掉了實際上並沒有使用的程式碼來減少包的大小。現在，tree-shaking 的好處將根據你的程式碼庫而有所不同。由於我們的幾個架構決策，我們從

應用運籌學基礎：組合優化 (4) - 近似算法選講 (2)

得到 帶來 基礎 函數 its 都是 sum pac mat 這一節課證明了 bin packing 問題 first fit 算法的漸進比為 1.7。 均攤體積 如果有 $n$ 個物品，每個物品的體積都是 0.51，我們可以分析出最優目標函數值的下界至少約為 $

應用運籌學基礎：組合優化 (6) - 近似算法選講 (4)

生成 dia targe 什麽 子圖 旅行 歐拉回路 偶數 image 這節課介紹了斯坦納樹問題（Steiner tree）與旅行商問題（TSP），並講解了它們的近似算法。 平面上的斯坦納樹 平面上的斯坦納樹指的是這樣的問題：平面上有 $n$ 個點，要用總長盡量少

第4周小組作業：WordCount優化

report 應該 有一個 文件 ase 第一個 一行 好的 速度 1.基本任務 項目地址 　　https://github.com/JarrySmith/WordCountPro PSP表格 PSP2.1表格 PSP2.1 P

軟件質量與測試第4周小組作業：WordCount優化

結果 文本 一個 統計 and 詞頻統計 adf highlight line GitHub項目地址 https://github.com/Guchencc/WordCounter 組長： 　　陳佳文：負責詞頻統計模塊與其他模塊 組員： 　　屈佳燁：負責排序模塊 　

VPS搭建SS教程：VPS購買、使用、網絡優化，SS的搭建以及使用

oid 使用 root 保存 電腦配置 添加 引導 cts .html 下面的SS/SSR教程也是針對新手，從購買VPS，登錄VPS，對VPS的網絡進行優化（可以輕松看youtube的2k、4k），搭建SS/SSR，使用SS/SSR等。 下面以HiFormance提供的KV

網站優化基礎教程：第一步就是做好長尾關鍵詞優化！

網站搭建好之後應該怎麼優化？有的人是指注重首頁的優化，即主關鍵詞優化，不重視長尾關鍵詞，然而，發跡創業網認為做好長尾優化才是網站優化的開始。 下面我們就來說說怎麼做好長尾關鍵詞優化，希望對大家有所幫助。 1， 確定網站標題 網站標題一般是以品牌詞+主關鍵片語成的，品牌詞儘量選擇哪種網上很少

webpack 4：預設配置

webpack 4：預設配置 預設配置 預設值 預設入口 entry ./src/index.js（注意： 路徑必須帶上./） 默認出口 output ./dist（注意： 路徑必須帶上./

產品設計教程：利用“系列位置效應”優化UI

任何博得人們喜歡的產品都在一定程度上契合了使用者的心理需求。設計和心理學息息相關，掌握一些基本心理學知識，設計師的作品更能在潛意識中抓住使用者的心。 系列位置效應 “系列位置效應”(The Serial Position Effect) 最早由研究記憶的德國心理學家 Hermann

MyBatis基礎：使用java提供的ThreadLocal類優化程式碼

public class MyBaitsView { //使用java提供的ThreadLocal類來儲存SqlSession物件，方便同一執行緒獲得sqlSession public static ThreadLocal<SqlSession> threadLocal=ne

搭建自己的部落格（十六）：封裝優化閱讀量程式碼

1、將閱讀量的程式碼封裝在一個app中，增加擴充套件性 新建app： python manage.py startapp read_statistics 2、變化的部分 3、上程式碼 from django.contrib import admin from .

不可錯過的 GAN 資源：教程、視訊、程式碼實現、89 篇論文下載

NIP 2016 對抗訓練 Workshop 　　【網頁】https://sites.google.com/site/nips2016adversarial/ 　　【部落格】http://www.inference.vc/my-summary-of-adversarial-training-

tensorflow學習（4）：損失函式+優化方法

一、損失函式 提起損失函式，大概最常用的就是交叉熵和均方誤差了。 1.交叉熵損失函式：針對分類問題 假設某個樣例的正確答案是(1,0,0)，預測值是[0.5,0.4,0.1] 那麼其交叉熵為H((1,0,0),(0.5,0.4,0.1))=-(1log0.5+0log0.4+0*log

arcgis jsapi介面入門系列（4）：用程式碼在地圖畫點線面

PS：用程式碼畫點這樣寫是為了跟後面的用滑鼠畫點線面區分出來 畫點 drawPointGraphic: function () { //點有多種樣式：一般的點，顯示文字，顯示圖片 //一般的點

Youtube營銷基礎教程：建立頻道、品牌賬戶及優化

相信大家都看到過“社會豬”、“妖嬈花”等抖音爆款，目前抖音、快手等短視訊平臺已經是眾多商家推廣的必爭之地。國內短視訊營銷效果非常好，國外自然也不例外。而國外最好的視訊平臺莫過於Youtube。Youtube不僅可以得到來自谷歌的搜尋引擎排名，其自身流量也相當不錯

TensorFlow入門教程：4：視覺化tensorboard

Tensorboard在pip中顯示的概要資訊是”lets you watch Tensors Flow“，watch tensors的flow就是Tensorboard所要做的視覺化的主要功能。一般用於確認tensorflow模型訓練過程的視覺化。 概要資訊