最近在进行前端项目的开发过程中，我们需要引入一些第三方的 JavaScript 库，很多时候会遇到误加载 HTTP 资源的问题。为了解决这个问题，我们可以使用一个名为 node-https-loader 的 npm 包来把资源转换为 HTTPS。
下面，让我们来开发者地进行一次详细的 node-https-loader 学习和使用教程。
什么是 node-https-loader？
node-https-loader 是一个 webpack loader，使用它可以通过在打包过程中将 HTTP 请求转化为 HTTPS 请求，这样就可以轻松解决了使用常规 CDN 引入资源容易造成的资源安全问题。
node-https-loader 如何使用？
下面我们详细阐述一下如何使用 node-https-loader。
安装 npm 包
安装 node-https-loader 的命令非常简单，只需要执行以下命令即可：
npm install --save-dev node-https-loader
使用 node-https-loader
在 webpack 的配置文件中配置 node-https-loader，将 HTTP 请求转化为 HTTPS 请求。我们可以先在 webpack 配置文件中加入以下内容：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------------------------
---- -
-
------- --------------------
-------- -
------ -----------------------------
------------------- ----
--
--
--
--
--
--
--对 node-http2 的支持
优化前端性能，我们不得不做一些深入的事情。https 的协议是基于 ssl/tls 的，原理上说是在握手的时候建立一 条 会话 和一个密钥 ，并在秘钥里交换基于symmetric加密的秘钥，后续的交互就是加密的了。不过 https 的握手有些复杂，这导致了一些性能问题：
- http 中拉取代码的工作流是同时发起多个请求，http2 支持将这些请求打包到一个 TCP 连接中，节省建立连接开销。
- http 中的文本资源以及数据请求采用字符串传输，而文本是一种很自然的类型，我们想用其 尽可能贴近人类的语言表达 ，而 http2 协议支持二进制传输，再加上 gRPC 协议，二者的评测结果在一定场景下明显优于 RESTful。所以，前端项目的优化需要使用 http2 协议进行资源加载。
node-https-loader 也可以支持 node-http2 模块中的 HTTP2 服务，只需要在配置文件中将 http2 选项打开即可。具体配置如下：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------------------------
---- -
-
------- --------------------
-------- -
------ -----------------------------
------------------- -----
------ -----
---- -----------------------------------
----- ------------------------------------
--
--
--
--
--
--
--注意事项
总体来说，使用 node-https-loader 是非常方便和简单的，但在使用时还需要注意一些事项：
- proxy：使用 node-https-loader 就是为了加入 HTTPS 协议，proxy 属性则是用于代理 CDN 中的 HTTPS URL。
- disableHeaderCheck：有时 HTTPS 返回的 headers 没有包含 content-length，这会导致 node-http2 模块无法正确解析响应头。此时我们需要将该属性设为 true。
- http2：在 HTTP2 模块中使用时需要设置为 true。
- key 和 cert：不需要使用 HTTPS 直接可在 JavaScript 加载证书。
示例代码
最后，我们提供一个示例代码，供您参考使用。
-- -------------------- ---- -------
----- ------------- - -
------- -
------ -
-
----- --------------------------
---- -
-
------- --------------------
-------- -
------ -----------------------
------------------- -----
------ -----
---- -----------------------------------
----- ------------------------------------
--
--
--
--
--
--
--
-------------- - --------------总体来说，使用 node-https-loader 是非常方便和简单的，同时也能够帮助我们很多避免常规 CDN 引入资源容易造成的资源安全问题。希望这篇文章对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f83238a385564ab6c00