阅读 211

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