在前端开发中，Web 应用程序的性能优化是非常重要的。其中，减少页面渲染时间是最为关键的因素之一。而其中一个影响页面渲染时间的因素就是 HTML 文件的大小。
在前端项目中，我们可能会遇到一些 HTML 文件中存在多余的空格、换行符对应成的空白字符，这些字符对于 HTML 文件而言是没有任何意义的，而我们不清楚这些多余的空白字符是否对页面性能带来影响。为了避免这个问题，我们可以借助 npm 包 strip-whitespace-plugin 前置处理程序将文件中的多余空白字符去掉。
strip-whitespace-plugin 简介
strip-whitespace-plugin 可以帮助我们在构建应用程序时删除 HTML 和 CSS 中的多余空白字符。其可以与 Webpack、Gulp 等流行的前端构建工具集成使用。安装 strip-whitespace-plugin 也非常简单，可以通过以下命令安装：
npm install strip-whitespace-plugin --save-dev
strip-whitespace-plugin 使用教程
在这里，我将介绍如何在应用程序中使用 strip-whitespace-plugin 去掉多余空白字符。
使用 strip-whitespace-plugin 替换 loader
要使用 strip-whitespace-plugin 将多余空白字符删除，你需要将你的 Webpack 配置文件完全重构以将其配置为阶段，而不是作为 loader。这意味着它将替换传统的 HTML 或 CSS loader。
以下是一个使用 strip-whitespace-plugin 的示例：
-- -------------------- ---- -------
-- -----------------
----- ----------------- - -------------------------------
----- --------------------- - -----------------------------------
-------------- - -
-- --- -- ------- --
------------- -
--------- -----
---------- -
--- ------------------------
--
--
-- --- -- ------- --
--使用 StripWhitespacePlugin 后，将会在构建时自动删除多余的 HTML 和 CSS 空白字符。
使用选项自定义 strip-whitespace-plugin 行为
默认情况下，strip-whitespace-plugin 将会删除所有的空白内容；如果你想定义一些特殊行为，你可以使用以下配置来实现：
-- -------------------- ---- -------
-- -----------------
----- ----------------- - -------------------------------
----- --------------------- - -----------------------------------
-------------- - -
-- --- -- ------- --
------------- -
--------- -----
---------- -
--- -----------------------
-- -----------
---
--
--
-- --- -- ------- --
--strip-whitespace-plugin 支持以下各种选项，可以在它的实例化时进行配置：
include- 一个正则表达式，以确定哪些文件需要进行空白字符删除，默认是所有文件。exclude- 一个正则表达式，以确定哪些文件不应进行空白字符删除。removeComments- 设置为true将删除 HTML 中的所有注释。removeEmptyElements- 设置为true将删除 HTML 中的空元素。
示例
下面是一个简单的 Webpack 配置示例，其中使用了 strip-whitespace-plugin。这个示例展示了如何将该插件与 html-webpack-plugin 一起使用，以在构建期间最小化 HTML 文件。
-- -------------------- ---- -------
-- -----------------
----- ----------------- - -------------------------------
----- --------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- --------
--
-------- -
--- --------------------
--- ------------------------
--
--在上面的示例中，我们首先在 Webpack 配置文件中引入了 html-webpack-plugin 和 strip-whitespace-plugin，然后在 plugins 部分实例化了这两个插件。在实例化 StripWhitespacePlugin 时不需要传入任何选项，因为它将按默认方式运行。
总结
在本文中，我们介绍了一种名为 strip-whitespace-plugin 的 npm 包，它可以在应用程序构建时自动删除多余的空白字符。我们还介绍了如何在项目中使用该插件，以最小化 HTML 和 CSS 文件的大小。希望这篇文章能够帮助你提高你的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056f0d81e8991b448e78c8