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,都打包进来。