前言
在前端开发中，我们经常会使用到一些第三方库和工具，而这些库和工具通常都是通过 npm 安装的。而 npm 管理的包中，往往会包含源码、文档、示例以及很多不必要的资源（如图片、样式等）。这些资源对于我们在项目中使用这些库来说是非常有用的，但是在构建打包时，这些资源会增加构建耗时和打包体积，因此需要把它们移除掉。今天我们就来介绍一个 npm 包——babel-plugin-import-remove-resource-query，它可以帮助我们移除前端库中不必要的资源。
什么是 babel-plugin-import-remove-resource-query
babel-plugin-import-remove-resource-query 是一个 babel 插件，可以用来移除前端库中的不必要资源。它可以遍历所有的 import 语句，并删除其中的查询参数。比如，我们可以把下面这个语句：
import foo from 'bar?query=value';
转换成：
import foo from 'bar';
这样可以有效减少构建打包时的耗时和打包体积。
如何使用 babel-plugin-import-remove-resource-query
使用 babel-plugin-import-remove-resource-query 非常简单，只需要安装并配置即可。
安装
在项目中安装 babel-plugin-import-remove-resource-query 并保存到开发依赖中：
npm install --save-dev babel-plugin-import-remove-resource-query
配置
在 babel 的配置文件中添加该插件即可。假设我们的 babel 配置文件是 .babelrc，那么我们可以在该文件的 plugins 字段下添加以下内容：
-- -------------------- ---- -------
-
---------- ----------------------
---------- -
-------------------------------- -
------------- ------ ------ ----- ------ -------
---------- -
------- -
---------- -------
------ -----
-------- -----
-
-
--
-
-其中，extensions 表示要处理的文件后缀名列表，modules 表示需要处理的模块列表。每个模块都需要指定库名 library，以及该库的 esm 和 style 的路径。这里我们以 antd 为例，如果有其他的前端库需要处理，可以根据需要修改相应的配置。
示例
我们来看一个示例，假设我们要处理的前端库是 antd。我们首先需要在项目中安装 antd：
npm install --save antd
然后配置 babel，具体步骤已经在上面介绍过了。最后我们来建立一个简单的 antd 示例，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------
------ ------- -------- ----- -
------ -
-----
------- ---------------------- ---------------
------
--
-这里我们只使用了 Button 组件，并没有使用其他的资源。使用 babel-plugin-import-remove-resource-query 插件处理后，打包时就不会把 Button 组件的其他资源一并打包了。
学习与指导意义
babel-plugin-import-remove-resource-query 的使用可以帮助我们减小项目的打包体积和构建耗时，提高项目的可维护性和可扩展性。同时，学习该插件的使用方法，也可以帮助我们更深入了解前端项目构建和打包的工作原理。
在实际项目中，我们经常需要使用到前端库，而这些库的资源通常都是比较庞大的，对于我们的项目来说有些冗余。因此，使用 babel-plugin-import-remove-resource-query 插件可以帮助我们移除不必要的资源，达到减小项目体积和提升项目性能的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f73daeea9b7065299ccbc3c