前言
由于前端项目的多样化和复杂性，项目中的模块配置也越来越复杂，不同的团队和项目也有差异化的配置需求。而且，针对某些地方重复处理代码也会让代码不易维护。因此，需要一个工具来进行统一管理。fis3-parser-gfe-delmod-config 插件就是为了方便大家统一管理模块配置而产生的。
fis3-parser-gfe-delmod-config 插件是什么？
fis3-parser-gfe-delmod-config 插件是一个基于 fis3 的编译工具，它能够在编译前通过用户自定义的配置来去掉不需要的模块，减小最终编译出来的文件大小，优化前端页面性能。
安装和使用 fis3-parser-gfe-delmod-config 插件
安装
通过 npm 安装 fis3-parser-gfe-delmod-config 插件:
$ npm install fis3-parser-gfe-delmod-config --save-dev
使用
在项目配置文件 fis-conf.js 中进行 fis3-parser-gfe-delmod-config 插件的配置，在配置中统一管理模块的删除处理：
fis.match('/web/pages/(**).tpl', {
parser: fis.plugin('gfe-delmod-config', {
moduleLocations: ['static/css/??*.css', 'static/js/??*.js']
}),
useMap: true
})moduleLocations
moduleLocations 参数为数组类型，表示页面中存在的模块的路径，插件会匹配页面依赖并删除未在该选项中出现的模块。
moduleLocations: ['static/css/??*.css', 'static/js/??*.js']
上述中，我们规定了模块的所有目录为 static/css/ 和 static/js/ ，每个目录下包含了一些模块文件。我们将这些模块设置到模块寻找列表（moduleLocations）中，插件就会在文件有依赖关系的时候，匹配依赖中的模块是否存在于这个寻找列表中，如果没有就删除这个模块。
你还可以通过正则表达式的方式新增一个文件路径，比如：
moduleLocations: [/static\/js\/\w+\.js/, 'static/css/??*.css']
最后引用一下即可：
<link rel="stylesheet" type="text/css" href="static/css/xx.css" /> <script type="text/javascript" src="static/js/xx.js"></script>
特别说明
fis3-parser-gfe-delmod-config 插件要求在正处于 fis3 的编译过程中。
示例代码
我们做一个上线例子来演示如何使用 fis3-parser-gfe-delmod-config 插件：
项目目录结构如下：
-- -------------------- ---- -------
-
--- ---------
--- -----------
--- ------------
--- ---
--- -----
- --- ---------
- --- ----
- --- ---------
--- ------
--- ---
- --- ---------
- --- ---------
--- --
--- ---------
--- --------
--- --------fis-conf.js 配置如下：
-- -------------------- ---- -------
-------------------- --------
-- ----
---------------------------------------------- -
-------- -----------------
------- --------------------------------
---------------- ----------------------- ---------------------
---
------- ----
---------------- -
---------- -----------------------
----------------- -
---------- -----------------------
---
-- ----
----------------------------------- -
------------------- -----
--------- -----
---
-- ------------- ----- ---
--------------------------- -
---------------- ------
------------------- -----
--------- -----
----------------------------------- -
-------- -------------------
---- -------------------
---------- ----
---
-- ---- ---- ------- ----接下来，编辑页面，引用项目所需的静态文件，即可在打包发布时，自动删除掉没有被使用的文件，并进行页面打包压缩。
总结
fis3-parser-gfe-delmod-config 是一款非常实用的前端工具，可以帮助我们管理和优化项目，让代码更加清晰、简洁，易于维护和扩展。在项目中使用这个插件，能够像大剪刀一样剪去无用的代码，提高网站的性能，推广网站的速度。希望这篇文章能够对你有所帮助，感谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc581e8991b448dd2dc