ReactNative/ram bundles inline requires

حزم وحدات RAM والمتطلبات المُضمَّنة

إن كان لديك تطبيق كبير، فقد ترغب في التفكير في تنسيق حزمة وحدات الوصول العشوائي (Random Access Modules اختصارًا RAM)، واستخدام المتطلبات المضمَّنة inline requires. هذا مفيد للتطبيقات التي تحتوي على عدد كبير من الشاشات التي قد لا تُفتَح أبدًا أثناء استخدام التطبيق المعتاد، ويكون ذلك مفيدًا للتطبيقات التي تحتوي على كميات كبيرة من الشيفرة التي لا تحتاج إليها لفترة من الوقت بعد بدء التشغيل. قد يشتمل التطبيق مثلًا على شاشات فحص أداء معقدة أو ميزات أقل استخدامًا، ولكن معظم الجلسات تتضمن فقط زيارة شاشة التطبيق الرئيسية للحصول على التحديثات. يمكننا تحسين تحميل الحزمة باستخدام RAM وطلب هذه الميزات والشاشات مضمَّنة (عند استخدامها بالفعل).

تحميل شيفرة JavaScript

يجب تحميل شيفرة JS في الذاكرة وتحليلها، قبل أن يتمكن react-native من تنفيذها. إذا حمَّلت حزمة bundle بحجم 50 ميجابايت مع الحزمة المعيارية، فيجب تحميلها كلها وتحليلها قبل تنفيذ أي منها. يتمثل التحسين الكامن وراء حزم RAM في أنه يمكنك فقط تحميل جزء من الـ 50 ميجابايت الذي تحتاجه بالفعل عند بدء التشغيل، وتحميل المزيد من الحزمة تدريجيًا حسب الحاجة إلى هذه الأقسام.

المتطلبات المضمَّنة

تؤخّر المتطلبات المضمَّنة طلب وحدة أو ملف حتى تكون هناك حاجة فعلية لهذا الملف كما في المثال الأساسي كالتالي:

VeryExpensive.js

import React, { Component } from 'react';
import { Text } from 'react-native';
// ... import some very expensive modules

// You may want to log at the file level to verify when this is happening
console.log('VeryExpensive component loaded');

export default class VeryExpensive extends Component {
  // lots and lots of code
  render() {
    return <Text>Very Expensive Component</Text>;
  }
}

Optimized.js

import React, { Component } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';

let VeryExpensive = null;

export default class Optimized extends Component {
  state = { needsExpensive: false };

  didPress = () => {
    if (VeryExpensive == null) {
      VeryExpensive = require('./VeryExpensive').default;
    }

    this.setState(() => ({
      needsExpensive: true
    }));
  };

  render() {
    return (
      <View style={{ marginTop: 20 }}>
        <TouchableOpacity onPress={this.didPress}>
          <Text>Load</Text>
        </TouchableOpacity>
        {this.state.needsExpensive ? <VeryExpensive /> : null}
      </View>
    );
  }
}

يمكن أن تؤدي المتطلبات المضمَّنة إلى تحسينات وقت بدء التشغيل حتى بدون تنسيق RAM، لأن الشيفرة الموجودة في VeryExpensive.js ستُنفَّذ فقط بمجرد أن تكون مطلوبةً لأول مرة.

تفعقيل التنسيق RAM

على نظام التشغيل سينش تنسيق RAM على نظام iOS ملفًا مفهرسًا واحدًا بحيث يحمّل react native وحدةً منه فقط في كل مرة، بينما سينشئ على نظام Android مجموعة من الملفات لكل وحدة افتراضيًا. يمكنك إجبار نظام Android على إنشاء ملف واحد كنظام iOS، ولكن استخدام ملفات متعددة يمكن أن يكون أكثر فاعلية ويتطلب ذاكرة أقل.

يمكنك تفعيل تنسيق RAM في Xcode عن طريق تعديل مرحلة البناء "حزمة شيفرة React Native والصور Bundle React Native code and images". أضف السطر

export BUNDLE_COMMAND="ram-bundle"‎ قبل ‎../node_modules/react-native/scripts/react-native-xcode.sh:

export BUNDLE_COMMAND="ram-bundle"
export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh

يمكنك تفعيل تنسيق RAM على نظام Android من خلال تعديل الملف android/app/build.gradle خاصتك. أضِف أو عدّل الكتلة project.ext.react قبل السطر apply from: "../../node_modules/react-native/react.gradle"‎:

project.ext.react = [
  bundleCommand: "ram-bundle",
]

استخدم الأسطر التالية على نظام Android إن أردت استخدام ملف مفهرس واحد:

project.ext.react = [
  bundleCommand: "ram-bundle",
  extraPackagerArgs: ["--indexed-ram-bundle"]
]

ملاحظة: إن استخدمت محرّك Hermes JS، فليس هناك داع أن يكون لديك ميزة RAM مفعَّلة. يضمن الاستدعاء mmap عدم تحميل الملف بأكمله عند تحميل الشيفرة الثنائية في Hermes . قد يؤدي استخدام Hermes مع حزم RAM إلى حدوث مشاكل، لأن هاتين الآليتين غير متوافقتين مع بعضهما البعض.

إعداد التحميل المسبق والمتطلبات المضمَّنة

هناك عبء الآن لاستدعاء المتطلب require بعد أن أصبح لدينا حزمة RAM، إذ يحتاج require الآن إرسال رسالة عبر الجسر عندما يواجه وحدةً غير محمَّلة بعد. سيؤثر ذلك على بدء التشغيل التأثير الأكبر، لأنه المكان الذي يُجرَى به أكبر عدد من استدعاءات المتطلبات أثناء تحميل التطبيق للوحدة الأولية. يمكننا لحسن الحظ إعداد جزء من الوحدات بحيث تُحمَّل مسبقًا، ولكنك ستحتاج إلى تنفيذ بعض أشكال المتطلبات المضمَّنة.

التحقيق في الوحدات المُحمَّلة

يمكنك إضافة ما يلي بعد عمليات الاستيراد الأولية في ملف الجذر (index.(ios|android).js) الخاص بك:

const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
  .filter((moduleId) => modules[moduleId].isInitialized)
  .map((moduleId) => modules[moduleId].verboseName);
const waitingModuleNames = moduleIds
  .filter((moduleId) => !modules[moduleId].isInitialized)
  .map((moduleId) => modules[moduleId].verboseName);

// make sure that the modules you expect to be waiting are actually waiting
console.log(
  'loaded:',
  loadedModuleNames.length,
  'waiting:',
  waitingModuleNames.length
);

// grab this text blob, and put it in a file named packager/modulePaths.js
console.log(
  `module.exports = ${JSON.stringify(
    loadedModuleNames.sort(),
    null,
    2
  )};`
);

يمكنك عند تشغيل تطبيقك البحث في وحدة التحكم ومعرفة عدد الوحدات المحمَّلة وعدد الوحدات المنتظرة، وقد ترغب في قراءة أسماء الوحدات. لاحظ استدعاء المتطلبات المضمَّنة في المرة الأولى التي يُشار فيها إلى عمليات الاستيراد. قد تحتاج إلى التحقيق وإعادة البناء للتأكد من تحميل الوحدات التي تريدها فقط عند بدء التشغيل. لاحظ أنه يمكنك تغيير كائن Systrace لمتطلب للمساعدة في تنقيح أخطاء المتطلبات التي قد تسبب مشاكلًا.

require.Systrace.beginEvent = (message) => {
  if (message.includes(problematicModule)) {
    throw new Error();
  }
};

كل تطبيق مختلفٌ عن الآخر، ولكن قد يكون تحميل الوحدات التي تحتاجها للشاشة الأولى فقط أمرًا منطقيًا. ضع ناتج اسم الوحدة المحمَّلة في ملف اسمه packager/modulePaths.js عندما يكون الوقت مناسبًا لك.

تحديث الملف metro.config.js

نحتاج الآن إلى تحديث الملف metro.config.js في جذر المشروع لاستخدام ملف modulePaths.js المُنشَأ حديثًا:

const modulePaths = require('./packager/modulePaths');
const resolve = require('path').resolve;
const fs = require('fs');

// Update the following line if the root folder of your app is somewhere else.
const ROOT_FOLDER = resolve(__dirname, '..');

const config = {
  transformer: {
    getTransformOptions: () => {
      const moduleMap = {};
      modulePaths.forEach((path) => {
        if (fs.existsSync(path)) {
          moduleMap[resolve(path)] = true;
        }
      });
      return {
        preloadedModules: moduleMap,
        transform: { inlineRequires: { blockList: moduleMap } }
      };
    }
  },
  projectRoot: ROOT_FOLDER
};

module.exports = config;

تشير المدخلة preloadedModules في config إلى الوحدات التي يجب تمييزها على أنها محمَّلة مسبقًا عند إنشاء حزمة RAM. تُحمَّل هذه الوحدات على الفور عند تحميل الحزمة، قبل تنفيذ أي متطلب. تشير المدخلة blockList إلى أن هذه الوحدات غير مطلوبة ضمنيًا، ولكن بما أنها محمَّلة مسبقًا، فلا يوجد تحسين في الأداء من استخدام متطلب مضمَّن. تقضي شيفرة JavaScript المنشَأة وقتًا إضافيًا في حل المتطلبات المضمنة في كل مرة يشار فيها إلى عمليات الاستيراد.

اختبار التحسينات وقياسها

يجب أن تكون الآن جاهزًا لإنشاء تطبيقك باستخدام تنسيق RAM والمتطلبات المضمنة. تأكّد من قياس أوقات قبل بدء التشغيل وبعده.

مصادر

• صفحة RAM Bundles and Inline Requires في توثيق React Native الرسمي.