什么是 side-effects
在开发前端应用时，无法避免使用第三方库。在引入第三方库时，往往需要在项目中处理它所引入的样式文件、JS 文件等资源。对于引入的一些库来说，可能因为它们会对全局环境产生影响而被称为非副作用模块。而一些模块会对全局环境产生一些看似无害的副作用，例如通过添加全局对象、修改原型链等操作。这些模块一般都是面向用户端的库，它们输出的不仅仅是 JavaScript 对象，还有一些全局代码。
这种“副作用”是在模块引入后，会对整个项目的代码产生影响，并不仅仅局限于当前模块中。因此，需要在项目中明确哪些模块带有副作用。
什么是 sideEffects
在 package.json 中，有一个 sideEffects 属性，它是一个 boolean 值或者一个数组。当它为 false 时，表明所有从这个包导入的模块都不带副作用。当 sideEffects 为 true 或者数组时，则会被认为这个包或某些文件包含副作用的代码，并因此在打包时添加一些处理程序。
如何使用 sideEffects
首先，你需要了解你所依赖包的 sideEffects。你可以在它的 package.json 文件里找到这个属性。如果该属性未指定，那么需要直接通过它的文档或代码查找。
当找到了这个包的 sideEffects 再来判断当前项目是否允许它所包含的副作用代码。如果当前项目确实需要这个包中的副作用才能正常工作，你可以在你的项目的 package.json 文件里开启这个包的 sideEffects：
{
"sideEffects": [
"./src/styles.css",
],
"dependencies": {
"lodash": "^4.17.26"
}
}以上代码的作用是允许 lodash 包的所有模块，并且允许当前项目中的样式文件引入样式带副作用。
如果你的项目禁止包含任何副作用的代码，那么你可以将 sideEffects 属性转换成一个布尔值，并将其赋值为 false：
{
"sideEffects": false,
"dependencies": {
"lodash": "^4.17.26"
}
}当然，在实际开发中，有些包依赖的代码中存在副作用和无副作用的代码混合的情况。此时我们需要使用一个数组来标识具有副作用的文件列表：
-- -------------------- ---- -------
-
-------------- -
-------------------
--------
---------
---------
---------
---------
--------
--------
-------
--
--------------- -
--------- ----------
-
-以上代码的作用是允许 lodash 包的所有模块，并且在项目中允许样式文件、图片文件带副作用。
示例代码
-- -------------------- ---- ------- - ----- - ----- -------------------- -- -- -------------------- -- ---- ---- -- - ------- - ---- --- ------ ------- - ---- ------------------- - -------- - ---------- --- --------- -- - ---- ---------- -- ---------- - ---- ------- ---------- -- ---------- - -- ------------ - ---- --------- ----------------------- --------------- ---------- ----------- ---------- ---------- -------------- ----------- - ------------ - ----------- - ---- ------- --------
总结
在开发过程中，面对复杂的依赖关系，我们需要清楚地知道自己的项目是否能够承载某些依赖库带来的副作用。通过 sideEffects 属性，我们可以明确指定当前项目是否可以承载带有副作用的依赖库。当然，在实际开发中，同时需要根据依赖库的 package.json 文件的 sideEffects 字段来判断当前依赖库是否带有副作用代码，以及如何准确地指定具有副作用代码的资源或文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bec81e8991b448e5a8d