介绍
fis3-parser-gfe-widget-inline 是一个依赖于 GFE 的 fis3 插件，作用是将 HTML 中使用的 GFE 组件直接插入到 HTML 中，从而避免页面中额外加载不必要的组件资源，提高页面加载速度。
该插件支持使用缓存和增量编译，且功能强大，可根据组件的实际引用情况进行精细化的打包，可以极大地提高页面性能。
安装
该插件依赖于 fis3-build-common 和 fis3-parser-html-literals 插件，所以需要先安装这两个插件。
安装 fis3-parser-gfe-widget-inline 插件：
npm install -g fis3-parser-gfe-widget-inline
使用方法
在 fis-conf.js 中配置插件：
fis.match('*.html', {
parser: fis.plugin('html-literals'), // 使用 fis3-parser-html-literals 插件
postprocessor: fis.plugin('gfe-inline'), // 使用 fis3-parser-gfe-widget-inline 插件
useCache: true, // 开启缓存
deploy: fis.plugin('local-deliver', {
to: 'dist' // 输出路径
})
})配置说明：
- parser：使用 fis3-parser-html-literals 插件。
- postprocessor：使用 fis3-parser-gfe-widget-inline 插件。
- useCache：开启缓存，可提高编译速度。
- deploy：指定输出路径。
示例代码
以下代码是一个使用 GFE 组件的 HTML 页面：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- --------------
-------
------
---- -------------------------
-------- --- -------
------- --------
------
-------
-------使用 fis3-parser-gfe-widget-inline 插件编译后的代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- -------------- ------- ------ ---- ------------------------ ------------------------- ----------------------------------------------------------------------- --- -------------- -------------- ------- -------------------------------------------------------- ------- -------
可以看到，GFE 组件直接被插入到了 HTML 中，避免了额外的请求，从而提高了页面加载速度。
注意事项
- 该插件依赖于 GFE，所以需要先安装 GFE。
- 该插件只能用于 fis3 项目中。
- 该插件在编译时需要访问 GFE 相关文件，所以需要配置 g-root 和 g-config。g-root 为 GFE 项目的根目录，g-config 为 GFE 的配置项，可以根据实际情况进行配置。
- 如果页面中使用的 GFE 组件有变化，需要重新编译该页面才能生效。可以使用 fis3 release -w 命令开启监听模式，实现自动编译。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005518481e8991b448ced67