简介
vulcanize-loader 是一个 Webpack loader，用于将 Polymer 应用程序中的 HTML 和 CSS 代码串联起来。此操作可以显著减少页面中的请求数，从而提高性能。
如果您从未操作过 Polymer 应用程序，则可以跳过此文章。否则，请继续阅读，以了解如何使用 vulcanize-loader 提高您的 Polymer 应用程序的效率。
准备工作
在开始使用 vulcanize-loader 之前，请确保您的 Polymer 应用程序已经在 Webpack 中正常工作。如果您还没有将 Polymer 应用程序与 Webpack 集成，请先进行该操作。
安装
使用以下命令安装 vulcanize-loader：
npm install vulcanize-loader --save-dev
配置
将以下内容添加到您的 Webpack 配置文件中：
-- -------------------- ---- ------- -------------- - - --------- ------- - ------ - - ----- ---------- ---- - - ------- ------------------- -------- - -------- --- --------- --- -------------- ------ -------------- ----- -------------- ----- ---------- ----- ---------------- ---- - - - - - - -展开代码
选项
以下是 vulcanize-loader 的选项：
abspath：用于拼接文件路径的基本路径，可选，默认为当前工作目录。excludes：指定要排除的 HTML 文件列表，可选，默认为空数组。stripExcludes：指定是否从 HTML 文件中移除排除列表中的文件名，可选，默认为 false。stripComments：指定是否从 HTML 文件中移除注释，可选，默认为 true。inlineScripts：指定是否内联 JavaScript 代码，可选，默认为 true。inlineCss：指定是否内联 CSS 代码，可选，默认为 true。stripWhitespace：指定是否从 HTML 文件中移除空格和换行符，可选，默认为 true。
示例
以下是使用 vulcanize-loader 的示例代码：
<link rel="import" href="./a.html"> <link rel="import" href="./b.html">
通过 vulcanize-loader 处理后，上面的代码将变为：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>h1{color:red}</style><script>alert("inline script")</script></head><body><template is="dom-bind"> <h1>Hello World!</h1></template></body></html>
结论
使用 vulcanize-loader 可以将 Polymer 应用程序的 HTML 和 CSS 代码串联起来，从而提高性能。尝试对您的 Polymer 应用程序使用 vulcanize-loader，查看性能方面的巨大提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71331
