fis3-postpackager-inline-ex 是一个基于 fis3 的 npm 包，用于将页面中的 HTML、CSS 和 JavaScript 文件进行 inline 处理，将它们合并为一个文件，以此提升网站的加载速度。
安装
在使用 fis3-postpackager-inline-ex 之前，需要先确认是否已经安装了 fis3。如果没有，需要先执行以下命令进行安装：
npm install fis3 -g
安装完 fis3 后，就可以安装 fis3-postpackager-inline-ex：
npm install fis3-postpackager-inline-ex -g
使用
fis3-postpackager-inline-ex 需要在 fis-conf.js 中进行配置。具体配置如下：
-- -------------------- ---- -------
---- --------------------------- --
--- ------ - ---------------------------------------
-------------- ------ -----
----------------------------- -
---- --------------------------- --
------------- --------
-----------
----- ----------------
----- ------ -------
----- ------- -----
--
---以上配置中，name 属性指定打包后的文件名，type 属性指定要 inline 处理的文件类型。如果要处理 HTML 文件，需要在 fis.match 中指定文件类型。
示例代码
以下是一个完整的示例代码，将会演示如何使用 fis3-postpackager-inline-ex：
fis-conf.js
-- -------------------- ---- -------
--- ------ - ---------------------------------------
------------------- -
---- -------------------------- -- ---- --
---------- -----------------------
---- ------------------------- -- ---- ---
---------- --------------------------
---- ----------------------- -- --- --
---------- ------------------------
---- ----------------------- -- ---------- ---
---------- ------------------------
---- --------------------------- ---- ------ --
------------- --------
--- ---- - ------ -------- ----- ------ ------
----- ------ -------
-----------
----- ---------------
--
---index.html
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------------------- ----------
----- ---------------- -----------------------
------ ----------------
-- ----- --- --
---- -
---------- -----
------------ ----
-
--------
------- ----------------------------------
-------
------
-----------------
------- -------------- --- --- --- ------ -------
-------
-------执行构建命令
fis3 release prod
执行完上述命令后，fis3-postpackager-inline-ex 会将 index.html 文件中的所有 CSS、JavaScript 和内嵌 CSS 内容全部 inline 处理，并打包成一个 inline.min.js 文件，最终的输出结果如下所示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>fis3-postpackager-inline-ex 示例</title><style type="text/css">body{font-size:14px;line-height:1.5}.box{background:#f7f7f7;padding:20px;margin:20px}.btn{color:#fff;background:#0a8cce;border:none;padding:10px 20px;border-radius:3px}</style><script>$(function(){console.log("这是一个示例页面")});</script></head><body><h1>这是一个示例页面</h1><p>页面中的 CSS、JavaScript 和内嵌 CSS 将会被 inline 处理。</p></body></html>可以看到，所有的 CSS、JavaScript 和内嵌 CSS 内容都被 inline 处理，最终只有一个 inline.min.js 文件被加载，整个页面的加载速度得到了极大地提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560a581e8991b448dee32