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>
    );
  }
}