在前端开发中，我们经常会用到 JavaScript 的一些库和框架，并以 npm 包形式安装使用。而有些库可能在导入时会带来一些副作用，比如改变全局状态、影响性能等。为了避免这种副作用，我们可以使用 babel-plugin-import-sideeffect 这个 npm 包，它可以帮助我们在导入库时自动剔除掉不需要的副作用。
背景
前端开发过程中，我们经常会使用第三方库，这些库对我们开发具有重要的帮助作用。例如时间格式化库 moment，前端路由库 vue-router 等等。这些库往往需要通过 import 或 require 语法来导入到我们的项目中。
然而，这些库在导入时可能会带来一些副作用，这些副作用可能是全局状态的改变，或者是会影响项目的性能。比如当我们导入 moment 库时，它会把一个全局对象 moment 注册到全局作用域中，这可能会与项目中其他模块中的 moment 命名冲突，而这种冲突可能会导致项目出错。又比如，我们导入的某个库中有很多不必要的模块，这些模块可能在我们的项目中并没有被使用，而却会导致项目的打包体积变得不必要地大。
因此，解决这些库的副作用就成了我们需要重点解决的问题。
安装
该库可直接通过 npm 进行安装，通过以下命令即可：
npm install babel-plugin-import-sideeffect --save-dev
使用
使用 babel-plugin-import-sideeffect 简单，只需要配置一下 babel 即可。在 .babelrc 文件中新增 babel-plugin-import-sideeffect 插件即可实现自动剔除副作用，示例如下：
-- -------------------- ---- -------
-
---------- ---
---------- -
-
---------------------------------
-
-------------- ---------
-------------- ----
-
-
-
-上面的例子中，我们添加了一个名为 “moment” 的包标识符，同时设置了 sideEffects 为 true，说明我们需要保留该库的所有副作用。如果我们只需要保留该库某些模块的副作用，则需要设置 sideEffects 为一个列表，其中只包含需要保留模块的模块名即可。
在编译代码时，babel 会自动进入替换模式，自动剔除掉库中不需要的副作用。这样可以大大减小打包后代码的体积，并利用了 Tree Shaking 的思想。babel-plugin-import-sideeffect 主要的作用之一就是自动分析哪些副作用可以被剔除，哪些不行，同时它还会在剔除掉副作用后自动在代码中加入 __esModule = true 的语句。
示例代码
下面是一个简单的示例，我们将使用 lodash 来进行演示：
import _ from "lodash"; const arr = _.map([1, 2, 3], (n) => n * 2); console.log(arr);
我们可以通过使用 babel-plugin-import-sideeffect 来优化我们的代码：
-- -------------------- ---- -------
-
---------- ---
---------- -
-
---------------------------------
-
-------------- ---------
-------------- -------
-
-
-
-我们如何知道需要保留哪些副作用呢？简单的方法是查看库中导出的模块，并选择要使用的模块。比如上面的 lodash 代码中，我们只需要 map 模块，就可以删除掉其他模块的副作用。这将帮助我们更好的优化代码和提高项目性能。
总结
当我们开发前端项目时，会用到很多 npm 包。为了避免这些库导入时可能带来的副作用，我们可以使用 babel-plugin-import-sideeffect 来自动剔除掉不需要的副作用，从而提高代码运行效率和性能。同时，在开发期间也需要多了解库的文档和源代码，找到需要的模块并选择性地导入。这些措施都可以帮助我们更好的管理第三方库，使我们的代码更加健康和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672da0520b171f02e1cec