前言
对于前端工程师来说，优化资源加载是一项很重要的工作。在 Web 开发中，我们通常会遇到如图片未压缩、未使用雪碧图、CSS/JS 资源未压缩等常见问题，而这些都会影响网站的性能和加载速度。因此，在此提供一个 NPM 包 —— gulp-inlinerjs，来优化前端资源加载，进而提高网站性能和体验。
什么是 gulp-inlinerjs？
gulp-inlinerjs 是一个使用 InlinerJS 库内联 HTML/CSS 与 JS 的 gulp 插件。通俗来说，gulp-inlinerjs 可以将 HTML/CSS 与 JS 内联进主 HTML 文件中，减少网页资源请求次数，从而提高加载速度。
如何安装 gulp-inlinerjs？
在使用 gulp-inlinerjs 之前，需要安装 gulp 和 gulp-inlinerjs：
- --- - -- ---- --------------
gulp-inlinerjs 的使用教程
1. 基本使用
在 gulpfile.js 中引入 gulp 和 gulp-inlinerjs：
----- ---- - ---------------- ----- ------- - --------------------------
创建任务 task:
-------------------- ---------- -
----------------------
---------------
---- ----- -- -- ---
--- ---- -- -- --
---
-------------------------
--- 执行任务：
- ---- -------
经过内联操作，index.html 文件已转换为下面的格式，并保存到 ./dist/ 目录下：
--------- -----
------
------
----- ----------------
-------
- -
------ ----
-
--------
--------
------------------- ---------
---------
-------
------
------- -- -- ------ ----- ------------
-------
-------在 HTML 文件中，原本引入的 CSS 和 JS 代码被内联进 HTML 中，而在浏览器中打开该文件时，仅会发送一次请求，从而减少了加载时间。
2. 可选项
在 gulp-inlinerjs 的 options 中，支持以下几个可选项：
css (默认值：true)
将所有在 HTML 或标注中引用的 CSS 都内联到 HTML 头部中的 <style> 标签里。
js (默认值：true)
将 JavaScript 内容替换任何用 <script> 标签引用的 JavaScript 文件（包括内联的）。
prescript (默认使用空字符串)
会在 任意 执行的 JavaScript 之前放置赋值给 window.__inlinerJs 的代码，例如：
------------------ - ------------------ -- --- ----------------------------- - ----- -- --------
postscript (默认使用空字符串)
会在 任意 执行的 JavaScript 之后放置的代码，例如：
------------------------------------------
3. 模板使用
除了内置的 opts，也支持自定义模板并使用。默认模板在 ./templates/default/index.html 下定义，可以在此修改。
模板中已包含的模板标记如下表：
| 标记 | 描述 |
|---|---|
<% css %> |
将 CSS 条目内联为 HTML 中头部的 <style> 标签 |
<% js %> |
将 JavaScript 内容替换任何用 <script> 标签引用的 JavaScript 文件（包括内联的） |
<% base64DataUrl %> |
内联所有指定的 Base64 图片 |
<% META title="Your Title Here" %> |
在头部添加注释，例如：<title>Your Title Here</title> |
将自定义模板设置从选项传递，例如：
-------------------- ---------- -
----------------------
---------------
----------- --------------------------
---- ----- -- -- ---
--- ---- -- -- --
---
-------------------------
---通过传递 templateUrl 选项来更改缺省模板。
注意事项
- 若在 HTML 标签中使用了
src属性，且想使其内联，可以使用以下方法：
---- ----------------------------- ------------------
-------------------- -------- -- -
------ ----------
-------------
------------
--
---------------
---- ----- -- -- ---
--- ----- -- -- --
------ ----- -- ----
------- ---- -- ----
---
----------------------------
---- 在使用
gulp-svgstore插件时，需要使用gulp-cheerio重新定义生成的 html 文件中的 ID 标签，外部样式引用时会用到。
结语
通过 gulp-inlinerjs 这个 npm 包，让内联操作变得简单而快捷，不仅可用于实现图片或矢量图标的优化内联，在某些特定场景下，也可以使用插件将所需的 JS、CSS、HTML 等直接内联到页面底部，大大缩短首次页面加载时间和响应时间，提升用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/79690