Al desarrollar programas pequeños en uniapp, creo que muchos desarrolladores se han encontrado con el problema de que el tamaño del código es demasiado grande para empaquetarlo, en este momento es necesario optimizar el tamaño del paquete del programa pequeño. Permítanme compartir mis ideas de solución a continuación. Espero que pueda darte alguna ayuda.
Método 1: imágenes en línea
La razón por la que el mini programa es grande es porque si los recursos de imágenes en el directorio estático son demasiado grandes, podemos cargar las imágenes estáticas en el servidor de imágenes y el mini programa usa enlaces para descargar y usar las imágenes.
Utilice direcciones en línea para imágenes estáticas y no las coloque en el proyecto, excepto el ícono de la barra de navegación, porque solo puede usar recursos locales, que son relativamente pequeños.
1. Cargue recursos de imágenes en el servidor de imágenes.
Cargue las imágenes cortadas en el servidor de imágenes,
como https://www.xxxxxxxx.com.cn/wx/static/images/1.png
2. Manejar referencias de imágenes en JS y vue
2.1 Definir variables globales JS
Defina variables globales js en la página main.js
Vue.prototype.staticDir = 'https://www.xxxxxxxx.com.cn/wx/static/';
Vue.prototype.getStaticFilePath = function (url) {
return Vue.prototype.staticDir + url;
}
2.2 Reemplazar la dirección de la imagen en vue
La dirección de la imagen que citamos antes era la siguiente:
<view class="demo">
<image src="/static/images/1.png"></image>
</view>
Ahora podemos modificar src para que se vea así:
<view class="demo">
<image :src="getStaticFilePath('/images/1.png')"></image>
</view>
3. Procesar referencias de imágenes en CSS
Hay un archivo especial uni.scss en el directorio raíz de uniapp. Puede usar las variables de estilo aquí en el código scss sin importar este archivo. El compilador uni-app procesa especialmente este uni.scss en la configuración del paquete web, de modo que cada archivo scss se inyecta en este uni.scss para lograr un efecto disponible globalmente. Colocamos aquí la variable de directorio estático de scss para que pueda usarse globalmente.
3.1 Definir variables globales scss
Agregue al final de uni.scss:
// 背景图片路径
$custom-bg-img-url:'https://www.xxxxxxxx.com.cn/wx/static/';
3.2 Cambiar el nombre del archivo css a archivo scss
Cambie el nombre del archivo css original a un archivo scss y modifique la referencia en vue de la siguiente manera. Lang="scss" añadido
<style scoped lang="scss">
</style>
3.3 Reemplazar la dirección de la imagen en CSS
En el pasado, la dirección de la imagen de fondo en CSS era la siguiente:
.bgimg {
width: 40rpx;
height: 40rpx;
background-image: url(/static/imags/1.png);
background-size: cover;
}
Ahora podemos modificar la URL para que se vea así:
.bgimg {
width: 40rpx;
height: 40rpx;
background-image: url($custom-bg-img-url+'/images/1.png');
background-size: cover;
}
Método 2: carga de subpaquete
Además de las páginas de TabBa, se subcontratan otras páginas para garantizar el tamaño del paquete principal, porque esos js y componentes estáticos también se colocarán en el paquete principal después de la compilación. El método de subcontratación se explica en detalle en el sitio web oficial.
Actualmente, el tamaño del subpaquete del miniprograma tiene las siguientes restricciones:
El tamaño de todos los subpaquetes de todo el miniprograma no puede exceder los 20 M.
El tamaño de un único subpaquete/paquete principal no puede exceder los 2 M.
La subcontratación de miniprogramas puede optimizar el tiempo de descarga para el primer lanzamiento del miniprograma y permitir un mejor desacoplamiento y colaboración cuando varios equipos se desarrollan juntos.
Para un uso específico, consulte:
El sitio web oficial presenta
el uso de subcontratación,
subcontratación independiente,
subcontratación, predescarga,
subcontratación y asincronización.
Método 3: separación de dependencias
Después de usar el subpaquete, encontrará un problema extraño: los componentes y los archivos js del subpaquete se empaquetarán en el archivo proveedor.js del paquete principal, lo que hará que proveedor.js sea demasiado grande.
1. Verifique manifest.json. En la vista del código fuente debajo de este archivo, hay una optimización en el nodo mp-weixin.
El nodo de subpaquetes optimizado se utiliza para controlar la subcontratación de WeChat y este nodo debe configurarse en verdadero.
"optimization" : {
"subpackages" : true
}
2. Después de configurar y volver a ejecutar, encontrará que los archivos js subempaquetados ya no estarán empaquetados en el proveedor.js del paquete principal.
Método 4: compresión de código
1. Haga clic en Ejecutar en HBuilder -> Ejecutar en el simulador de subprogramas -> Si se comprime el código durante el tiempo de ejecución
2. Haga clic en Lanzar en HBuilder -> Mini programa -> Lanzar -> Mini programa - WeChat (solo aplicable a uni-app) (W)
3. Haga clic en Liberar. Luego, la consola comenzará la compilación y, cuando se complete la compilación, las herramientas de desarrollo de WeChat se abrirán automáticamente.
4. Ahora se ha reducido mucho, solía ser 3,2 M, pero ahora es solo 1,8 M. Ahora no hay problema si se usa para cargar código o depurar.
