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