webpack4 sideEffects實戰輕鬆搞懂

sideEffects 譯做反作用

函數反作用是指函數在正常工做任務以外對外部環境所施加的影響。具體地說，函數反作用是指函數被調用，完成了函數既定的計算任務，但同時由於訪問了外部數據，尤爲是由於對外部數據進行了寫操做，從而必定程度地改變了系統環境。函數的反作用也有多是發生在函數運行期間，因爲對外部數據的改變，致使了同步運行的外部函數受到影響。 引入來源百度百科

測試代碼準備

手動建立一個包delete放到了node_modules（2個文件）

• node_modules/delete/package.json

{
  "name": "delete",
  "sideEffects":false,
  "main": "index.js",
}
複製代碼

• node_modules/delete/index.js

export var a = (function () {
	console.log(11111111)
	return b;
})()

export function b() {
	return '22222222222';
}

export function c() {
	return '333333333333';
}
複製代碼

引入的入口

• gpwebpack/src/index.js

# 僅此一行 足矣！
import { a,b,c } from "delete";
複製代碼

項目要運行的命令

"scripts": {
    "dev": " webpack-dev-server --inline --progress --mode development --config webpack.dev.config.js",
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development"
  },
複製代碼

準備完畢！

開測

例1 "sideEffects":false ，標識沒有反作用

運行npm run build後

沒有搜到任何的 111 or 2222。證實沒有打包進來。

例2 "sideEffects":true ，標識有反作用

運行npm run build後

看到多了一個文件。

搜到 111 和 2222，沒有333。證實a,b打包進來，c沒有打包進來。

由於a是函數自執行，a又引用b,so。。。

例3 "sideEffects":false ，標識沒有副影響

運行npm run build:dev後

搜到的 111，2222，333。證實當 --mode development時，不開啓 tree-shaking,都打包進來。