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
后
--mode development
时,不开启tree-shaking
,都打包进来。