El tamaño de Android Apk y el rendimiento de la aplicación siempre han sido las principales preocupaciones de React Native Developers. Nuestra aplicación está escrita en React Native, y el tamaño Apk de la versión de Android ha alcanzado unos 80 MB. Por lo tanto, es un desafío encontrar una buena solución para reducir el tamaño de Apk y mejorar el rendimiento de la aplicación.
En este blog, introduciremos gradualmente los pasos para reducir el tamaño del apk, así como la mejora del rendimiento y la reducción del tiempo de inicio de la aplicación.
1. JSBundle y activo
Con el lanzamiento de 0.59, también se lanzó una nueva versión de JSC. La mayor ventaja de la nueva versión 0.59 es que puede generar APK para arquitecturas de 64 bits. Sin embargo, el problema resultante es el aumento del tamaño del paquete. Actualmente, el equipo de RN también está trabajando para eliminar varios módulos de React Native para su optimización.
1. Costo de importación, eliminar importación inútil
costo de importación como un complemento de Visual Studio, usándolo podemos analizar el costo de cada módulo importado. Luego, solo importamos los módulos requeridos, no toda la biblioteca. Y vea los cambios estremecedores en el visualizador del paquete JS, por lo que hemos cambiado casi todas las bibliotecas que ocupan mucho espacio en el paquete JS. Al administrar las importaciones, encontramos muchas declaraciones de importación no utilizadas. Por lo tanto, eliminarlos también nos ayuda a reducir el tamaño del paquete JS.
2. Eliminar bibliotecas de terceros inútiles
Compruebe si hay paquetes adicionales dependientes de terceros en el archivo package.json y elimínelos.
3. Código repetitivo del paquete
Es una buena práctica escribir código una vez y reutilizarlo una y otra vez, lo que puede escribir código más rápido, expandir la escala del producto y también ayudar a evitar que aumente el tamaño del paquete JS.
4. Filtrar módulos y recursos no utilizados en el entorno de producción
(1) bloque de código
__DEV__ se usa para distinguir entre las pruebas y el entorno en línea. Podemos usarlo para filtrar código o recursos no utilizados en el entorno de Producción. Por ejemplo, hay un módulo A personalizado:
Solo necesita compilarse en un archivo jsbundle en el entorno de prueba. Podemos hacer esto
loadAModule() {
if (__DEV__) {
require('A.module');
}
return null;
}⚠️ Nota
loadAModule() {
if (!__DEV__) {
return null;
}
require('A.module');
}En el código anterior, primero determinamos si el entorno de prueba devuelve nulo. Piense detenidamente si hay algún problema con este código: después de empaquetar el paquete react-native, aún encontrará el moduleId correspondiente al código del módulo A. También demostró que el módulo A estaba dividido en el jsbundle. Por lo tanto, en React Native, puede cargar selectivamente algunos archivos JS en diferentes entornos (desarrollo o producción) a través de __DEV__. Sin embargo, la rama de require debe colocarse en el if correspondiente (__ DEV __) {} else {} para que RN pueda filtrarlo cuando esté empaquetado. Cuando se empaqueta el RN, el código muerto en el if / else se eliminará; pero el requisito fuera del if / else, incluso si nunca se ejecutará, se analizará estáticamente y se ingresará en el paquete.
Si desea obtener más información sobre el código muerto de React (Native), puede leer esta traducción: [translation] Cómo realizar el modo de desarrollo en JavaScript
(2) Recursos de imagen
Generalmente gestionamos los recursos de imagen en RN de manera unificada (recomendado), y los citamos en el módulo de funciones. Del mismo modo, podemos usar __DEV__ para darnos cuenta de si cargar los recursos de imagen equivalentes
const inusrance = __DEV__ ? {
insuranceAnswerBg: require('../Images/insurance/insurance_answer_bg.png'),
} : null;5. Código de filtro Metro-Bundler
Después de la versión RN0.57, la herramienta de empaquetado fue migrada desde RN-Ci por Package e implementada de manera unificada por Metro. Para un uso más detallado y análisis de Metro, consulte mi artículo anterior:
Al mismo tiempo, una nueva generación de Metro ofrece a los desarrolladores un uso de la función "plug-in". Las funciones también son más ricas, como: transformador, serializador, etc., podemos usar el serializador para filtrar el código correspondiente durante el proceso de empaquetado
// metro.config.js
const moduleArray = require('./metro.filter');
/**
* 对未使用的文件模块进行过滤
* return false 则过滤不编译
* @param {*} module
* @returns
*/
function postProcessModulesFilter(module) {
if (moduleFilter(module.path) >= 0) {
console.log(`代码过滤中: ${module.path}`);
return false;
}
return true;
}
/**
* 正则匹配module
* @param {*} path
* @returns
*/
function moduleFilter(path) {
for (const i in moduleArray) {
if (path.match(`/${moduleArray[i]}/`)) {
return i;
}
}
return -1;
}
/**
* Metro 配置
* @format
*/
module.exports = {
serializer: {
processModuleFilter: postProcessModulesFilter,
}
};// metro.filter.js
// 配置在Production需要过滤的模块文件
module.exports = [
'Components/Insurance',
'Containers/Insurance',
'Components/ActivityEleven',
'Containers/ActivityEleven',
];En el código anterior, utilizamos processModuleFilter para filtrar el módulo de código declarado en metro.filter.js
⚠️ Nota
Al usar processModuleFilter para el filtrado de código, debe asegurarse de que el código del módulo filtrado no se pueda usar en ningún lado; de lo contrario, el jsBundle empaquetado contendrá la importación del par de módulos correspondiente, y durante el análisis, el análisis falla porque no se puede encontrar el moduleId correspondiente Aplicación de bloqueo
Segundo, Android
Ahora, después de reducir el tamaño del paquete JS, comenzamos a usar el "APK Analyzer" para analizar el apk en Android Studio. Notamos que hemos reducido el archivo index.android.bundle y una gran cantidad de archivos en la carpeta libs. Por lo tanto, comenzamos a analizar más el apk.
1. Pruebe el nuevo reductor de código R8
android.enableR8=trueLa compresión de código puede ayudar a reducir el tamaño de los APK eliminando el código y los recursos no utilizados. Acorta el código más rápido que ProGuard.
2. Habilitar la reducción de recursos
shrinkResources trueAyuda a utilizar la reducción de recursos para identificar y eliminar recursos innecesarios.
3. ResConfigs
resConfigs "zh"Al compilar la aplicación, eliminará todos los demás recursos localizados.
4. Comprime la imagen
aaptOptions {
cruncherEnabled = false
}Para comprimir los recursos de imagen utilizados en la aplicación, puede agregar esta línea a build.gradle en la sección de Android {}
5. MinifyEnabled
Active la ofuscación de protección. Si establece la minifyEnabled propiedad true, R8 combinará las reglas de todas las fuentes disponibles.
6. zipAlignEnabled
Habilitar la optimización de compresión zipAlign
