React-Native 应用程序在 ios 和 android 中都太大(android bundleRelease 大小为 283.3MB)

问题描述 投票:0回答:1

我有一个一周前构建的react-native应用程序,当我检查android中的应用程序大小时,它最初是17MB,我认为没问题,但现在当我检查我的apk大小时,它是638MB,捆绑包大小是283.3MB。 ios应用程序大小为180MB

应用程序的资源大小为 3.6MB,资源所在的总体 src 大小为 4.7MB,这意味着我的代码大小为 1.1MB

我没有添加任何其他库,所有库都是功能所必需的。

我的package.json文件在这里

  {
  "name": "salushealth",
  "version": "1.0.2",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "pregit": "git status",
    "git": "git add . && git commit -m",
    "postgit": "git push",
    "i-15": "react-native run-ios --simulator='iPhone 15 Pro Max'",
    "iPad": "react-native run-ios --simulator='iPad Pro (12.9-inch) (6th generation)'",
    "run-all": "yarn iPad && yarn i-15 && yarn android"
  },
  "dependencies": {
    "@apollo/client": "^3.8.8",
    "@preact/signals-react": "^2.0.0",
    "@react-native-async-storage/async-storage": "^1.19.6",
    "@react-native-community/netinfo": "^11.2.1",
    "@react-native-community/slider": "^4.5.0",
    "@react-native-masked-view/masked-view": "^0.3.0",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@reduxjs/toolkit": "^2.0.1",
    "@stripe/stripe-react-native": "0.19.0",
    "add": "^2.0.6",
    "axios": "^1.6.2",
    "camelize": "^1.0.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "formik": "^2.4.5",
    "graphql": "^16.8.1",
    "jsrsasign": "^11.1.0",
    "lottie-react-native": "^6.5.0",
    "moment": "^2.29.4",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-native": "0.72.7",
    "react-native-calendars": "^1.1303.0",
    "react-native-circular-progress": "^1.3.9",
    "react-native-device-info": "^10.11.0",
    "react-native-dropdown-picker": "^5.4.6",
    "react-native-gifted-charts": "^1.3.18",
    "react-native-gifted-chat": "^2.4.0",
    "react-native-image-crop-picker": "^0.40.2",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-otp-entry": "^1.4.0",
    "react-native-paper": "^5.11.1",
    "react-native-pie-chart": "^3.0.1",
    "react-native-pure-jwt": "^3.0.2",
    "react-native-raw-bottom-sheet": "^2.2.0",
    "react-native-responsive-fontsize": "^0.5.1",
    "react-native-safe-area-context": "^4.7.4",
    "react-native-screens": "^3.27.0",
    "react-native-select-dropdown": "^3.4.0",
    "react-native-skeleton-placeholder": "^5.2.4",
    "react-native-splash-screen": "^3.3.0",
    "react-native-storage": "^1.0.1",
    "react-native-store-version": "^1.4.1",
    "react-native-svg": "^14.1.0",
    "react-native-toast-message": "^2.1.7",
    "react-native-track-player": "^4.0.1",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-vector-icons": "^10.0.2",
    "react-native-zoom-us": "6.19.6",
    "react-redux": "^9.0.4",
    "redux-persist": "^6.0.0",
    "styled-components": "^6.1.1",
    "validator": "^13.11.0",
    "yarn": "^1.22.21",
    "yup": "^1.3.2",
    "yup-password": "^0.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "babel-plugin-inline-import": "^3.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-native-svg-transformer": "^1.3.0",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

这是我的 app.build.gradle 文件

apply plugin: "com.android.application"
apply plugin: "com.facebook.react"

/**
 * This is the configuration block to customize your React Native Android app.
 * By default you don't need to apply any configuration, just uncomment the lines you need.
 */
react {
    /* Folders */
    //   The root of your project, i.e. where "package.json" lives. Default is '..'
    // root = file("../")
    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
    // reactNativeDir = file("../node_modules/react-native")
    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
    // codegenDir = file("../node_modules/@react-native/codegen")
    //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
    // cliFile = file("../node_modules/react-native/cli.js")

    /* Variants */
    //   The list of variants to that are debuggable. For those we're going to
    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
    // debuggableVariants = ["liteDebug", "prodDebug"]

    /* Bundling */
    //   A list containing the node command and its flags. Default is just 'node'.
    // nodeExecutableAndArgs = ["node"]
    //
    //   The command to run when bundling. By default is 'bundle'
    // bundleCommand = "ram-bundle"
    //
    //   The path to the CLI configuration file. Default is empty.
    // bundleConfig = file(../rn-cli.config.js)
    //
    //   The name of the generated asset file containing your JS bundle
    // bundleAssetName = "MyApplication.android.bundle"
    //
    //   The entry file for bundle generation. Default is 'index.android.js' or 'SessionCard.js'
    // entryFile = file("../js/MyApplication.android.js")
    //
    //   A list of extra flags to pass to the 'bundle' commands.
    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
    // extraPackagerArgs = []

    /* Hermes Commands */
    //   The hermes compiler command to run. By default it is 'hermesc'
    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
    //
    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
    // hermesFlags = ["-O", "-output-source-map"]
}

/**
 * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
 */
def enableProguardInReleaseBuilds = false

/**
 * The preferred build flavor of JavaScriptCore (JSC)
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US. Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdkVersion rootProject.ext.compileSdkVersion

    namespace "com.salus.health"
    defaultConfig {
        applicationId "com.salus.health"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 4
        versionName "1.0.2"
    }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
}

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

这是我的 Podfile

# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, min_ios_version_supported
prepare_react_native_project!

# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
#
# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
# ```js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
# ```
flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'SalusHealth' do
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # Hermes is now enabled by default. Disable by setting this flag to false.
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable the next line.
    :flipper_configuration => flipper_config,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'SalusHealthTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end
java android ios objective-c react-native
1个回答
0
投票

您的应用程序大小必须增加,因为您在应用程序中安装的软件包是formik,这两个软件包也增加了我的应用程序..

© www.soinside.com 2019 - 2024. All rights reserved.