简介
vulcanize-loader 是一个 Webpack loader，用于将 Polymer 应用程序中的 HTML 和 CSS 代码串联起来。此操作可以显著减少页面中的请求数，从而提高性能。
如果您从未操作过 Polymer 应用程序，则可以跳过此文章。否则，请继续阅读，以了解如何使用 vulcanize-loader 提高您的 Polymer 应用程序的效率。
准备工作
在开始使用 vulcanize-loader 之前，请确保您的 Polymer 应用程序已经在 Webpack 中正常工作。如果您还没有将 Polymer 应用程序与 Webpack 集成，请先进行该操作。
安装
使用以下命令安装 vulcanize-loader：
--- ------- ---------------- ----------
配置
将以下内容添加到您的 Webpack 配置文件中：
-------------- - -
---------
------- -
------ -
-
----- ----------
---- -
-
------- -------------------
-------- -
-------- ---
--------- ---
-------------- ------
-------------- -----
-------------- -----
---------- -----
---------------- ----
-
-
-
-
-
-
-选项
以下是 vulcanize-loader 的选项：
abspath：用于拼接文件路径的基本路径，可选，默认为当前工作目录。excludes：指定要排除的 HTML 文件列表，可选，默认为空数组。stripExcludes：指定是否从 HTML 文件中移除排除列表中的文件名，可选，默认为 false。stripComments：指定是否从 HTML 文件中移除注释，可选，默认为 true。inlineScripts：指定是否内联 JavaScript 代码，可选，默认为 true。inlineCss：指定是否内联 CSS 代码，可选，默认为 true。stripWhitespace：指定是否从 HTML 文件中移除空格和换行符，可选，默认为 true。
示例
以下是使用 vulcanize-loader 的示例代码：
----- ------------ ---------------- ----- ------------ ----------------
通过 vulcanize-loader 处理后，上面的代码将变为：
--------- ---------------------- -------------------------------------------------------------------------------- --------------------------------------- -------------- --------- ------------------------------------
结论
使用 vulcanize-loader 可以将 Polymer 应用程序的 HTML 和 CSS 代码串联起来，从而提高性能。尝试对您的 Polymer 应用程序使用 vulcanize-loader，查看性能方面的巨大提升。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/71331