随着前端技术的发展，我们写的前端页面越来越复杂，而其中的模板部分也越来越多。使用模板可以方便我们动态生成页面结构，但是模板中的空格、换行等无用字符会占据较大的文件体积，造成页面加载速度较慢。因此，为了压缩模板文件，我们可以借助于 template-minify-loader 这个 npm 包来实现模板压缩，以减小文件体积，提高页面加载速度。
template-minify-loader 简介
template-minify-loader 是一款将模板文件进行压缩的 webpack 加载器，能够将模板中的空格、换行、注释等无用字符压缩掉，从而使文件体积更小，提高加载速度。
该加载器的基本使用步骤如下：
- 安装
template-minify-loader包
npm install template-minify-loader --save-dev
- 在
webpack.config.js中进行配置
在 module.rules 中添加如下的匹配规则：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------- -- -- ---- --
---- -
-
------- ------------------------
-
-
-
-
--
-- ---
-该规则会将所有后缀名为 .html 的文件匹配到，并使用 template-minify-loader 进行处理。
template-minify-loader 的详细使用
下面我们将详细介绍如何使用 template-minify-loader 进行模板压缩。
1. 安装 template-minify-loader 包
在命令行界面输入以下命令：
npm install template-minify-loader --save-dev
2. 配置 template-minify-loader
在 webpack.config.js 配置文件中增加如下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------- -- -- ---- --
---- -
-
------- ------------------------
-
-
-
-
--
-- ---
-3. 使用 template-minify-loader 进行模板压缩
在需要压缩的模板文件中使用 template-minify-loader 进行压缩，示例如下：
-- -------------------- ---- -------
---- --- ---- -- ---
-----
-------------
----
-------- ------
-------- ------
-------- ------
-----
------<!-- 压缩后的 html 模板 --> <div><p>这是一段文本</p><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></div>
从压缩后的模板文件可以看出，所有的空格、换行都被去掉了，使得文件体积大大减小，提升了页面加载速度。
template-minify-loader 的指导意义
使用 template-minify-loader 进行模板压缩，不仅可以提升页面加载速度，也可以减小打包后的文件体积，从而更快地进行网站发布。在实际工作中，我们可以根据自己的实际需要进行模板压缩，以达到更好的效果。
示例代码
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ -
-
----- ----------
---- -
-
------- ------------------------
-
-
-
-
--
-- ---
--<!-- index.html --> <div> <p>Hello World!</p> </div>
<!-- 压缩后的 index.html --> <div><p>Hello World!</p></div>
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b4bc6eb7e50355dbfdd