Hippy项目源码分析总结

最新推荐文章于 2022-02-15 22:22:33 发布

countryrain

最新推荐文章于 2022-02-15 22:22:33 发布

阅读量536

点赞数

文章标签： javascript 前端 node.js

本文链接：https://blog.csdn.net/weixin_45870965/article/details/122179877

版权

本文介绍了Hippy项目中的UriLoader类，特别是url-loader模块，它如何通过base64编码将图片资源内嵌到JavaScript中，提升页面性能。同时概述了Hippy架构，涉及前端、JS引擎和终端框架的交互及其在项目中的应用。

摘要由CSDN通过智能技术生成

2021SC@SDUSC


#include <memory>
#include <string>
#include <vector>

#include "base/unicode_string_view.h"

namespace hippy {
namespace base {

class UriLoader {
 public:
  using unicode_string_view = tdf::base::unicode_string_view;
  using u8string = unicode_string_view::u8string;

  UriLoader() {}
  virtual ~UriLoader() {}

  virtual bool RequestUntrustedContent(const unicode_string_view& uri,
                                       std::function<void(u8string)> cb) = 0;

  virtual bool RequestUntrustedContent(
      const unicode_string_view& uri,
      u8string& content) = 0;
};
}  // namespace base
}  // namespace hippy

补充简析url-loader：

什么是 url-loader

url-loader 会将引入的文件进行编码，生成 DataURL，相当于把文件翻译成了一串字符串，再把这个字符串打包到 JavaScript。

什么时候使用

一般来说，我们会发请求来获取图片或者字体文件。如果图片文件较多时（比如一些 icon），会频繁发送请求来回请求多次，这是没有必要的。此时，我们可以考虑将这些较小的图片放在本地，然后使用 url-loader 将这些图片通过 base64 的方式引入代码中。这样就节省了请求次数，从而提高页面性能。

如何使用

1. 安装 `url-loader`

npm install url-loader --save-dev

2. 配置 `webapck`

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {},
          },
        ],
      },
    ],
  },
};

3. 引入一个文件，可以是 `import`（或 `require`）

import logo from '../assets/image/logo.png';
console.log('logo的值: ', logo); // 打印一下看看 logo 是什么

三步即可

4. 完成结果

webpack

执行 webpack 之后，dist 目录只生成了一个 bundle.js。和 file-loader 不同的是，没有生成我们引入的那个图片。上文说过，url-loader 是将图片转换成一个 DataURL，然后打包到 JavaScript 代码中。

总结

Hippy总体架构：

前端框架层

主要实现了JSX页面DOM转化、js/native桥接接口、View/Module的前端实现。

JS引擎层

JS引擎层主要是JS代码通过Google V8引擎执行，然后通过so调用java代码。主要作用是打通JS和Java代码调用通道。

终端框架层

主要实现了Dom节点的终端渲染、View/Module的终端实现、Hippy的生命周期管理等功能。

Hippy项目源码分析结束