Que peut-on faire d'autre que la sous-traitance si la taille du mini-programme dépasse la limite ? Comment éviter et résoudre les limitations de taille ?

Que peut-on faire d'autre que la sous-traitance si la taille du mini-programme dépasse la limite ? Existe-t-il un moyen d'éviter de dépasser la limite de taille ? L'article suivant vous présentera comment éviter et résoudre les restrictions de taille. J'espère qu'il vous sera utile !

Il y a quelques jours, un ami qui vient de rejoindre l'industrie m'a demandé sur WeChat pourquoi l'invite de code lors de la soumission d'un mini-programme est trop volumineuse et ne peut pas être téléchargée ? Comment le résoudre ?
Bien sûr, la sous-traitance peut résoudre presque toutes les limitations de taille de soumission des mini-programmes WeChat, mais je lui ai quand même demandé de m'envoyer le contenu de l'invite. J'ai vu qu'il dépassait quatre à cinq cents Ko. Si la sous-traitance n'est pas exagérée, laissez-le simplement compresser les ressources statiques et ce sera fait. Mais plus tard, j'ai réfléchi aux autres avantages de la sous-traitance en plus de résoudre le problème de taille ? Existe-t-il un moyen d'éviter de dépasser la limite de taille ?

Texte :

La taille limite actuelle du mini programme WeChat et pourquoi il est nécessaire de limiter la taille :

1️⃣ Jetons d'abord un coup d'œil aux restrictions de taille actuelles du mini programme WeChat :
1. Aucune limite sur le nombre de sous-traitants ;
    2. La taille de tous les sous-colis ne peut pas dépasser 20 m ;
  3. La taille d'un seul colis ne peut pas dépasser 2 m

2️⃣ Alors pourquoi l'applet WeChat a-t-elle une limite de taille ?初 Parce que l'intention initiale de l'applet est d'aller après utilisation, une application légère. Il n'est pas recommandé de la concevoir comme une application, sa taille est donc limitée en tenant compte de la vitesse de démarrage et d'autres aspects.

Quels sont les moyens d'éviter et de résoudre la limite de taille :

Connaissant les restrictions liées ci-dessus, nous pouvons alors essayer d'éviter que la taille de notre mini-programme ne dépasse 2 m du processus de développement (bien sûr, la taille d'un centre commercial ou quelque chose est très grand, je n'ai rien dit de gros)

1. Utilisez des bibliothèques tierces pour charger à la demande autant que possible

Par exemple, si vous utilisez

echarts dans un projet, généralement, nous pouvons utiliser plusieurs types d'icônes, donc lors de l'installation, il n'est pas nécessaire de télécharger tous les echarts. Vous pouvez les personnaliser directement en ligne sur le site officiel des echarts. Vous pouvez enregistrer plus d'un point et demi en taille (ce n'est pas le cas). Il est recommandé d'utiliser la carte echarts Chine en raison de problèmes.) Semblable à certaines bibliothèques d'interface utilisateur que nous utilisons, si vous pouvez l'importer à la demande, importez-la simplement à la demande. Si l'introduction ne peut pas être effectuée à la demande, nous la modifierons Ici. nous recommandons une collection de certaines bibliothèques d'interface utilisateur couramment utilisées pour les mini-programmes WeChat

1 Bibliothèque officielle de composants WeUI

https://developers.weixin.qq.com/miniprogram/ dev/extended/weui/

.

2、ColorUI

https://github.com/weilanwl/ColorUI

3、Vant Weapp UI

https://youzan.github .io/vant-weapp/#/intro

4、iView UI

https://weapp.iviewui.com/docs/guide/start

5、TaroUI

https://taro-ui.jd. com/#/docs/introduction

Comment ajuster la taille de l'image

2. Compresser les images et autres fichiers statiques

Cela sera certainement fait dans le projet Beaucoup d'images sont utilisées . Habituellement, le design nous donnera une
image double ou triple image

pour une image, nous permettant d'afficher différentes images multipliées selon différentes résolutions. En fait, comme méthode grossière, nous pouvons utiliser le triple de l'image quelle que soit la résolution (non recommandé), puis compresser l'image sans perte, ce qui peut généralement réduire la taille de l'image de 70 %.

Recommandez une adresse de compression d'image ici (https://tinypng.com/)
3. Service cloud de ressources statiques

Réduisez la taille des ressources statiques dans les fichiers packagés et vous pouvez également les utiliser dans des projets Le statique les fichiers sont placés sur OSS et CDN peut être utilisé pour les accélérer et réduire la taille du code. Si vous souhaitez créer votre propre serveur cloud pour stocker des ressources statiques, il est recommandé d'utiliser Qiniu Cloud.
Enregistrez un compte Qiniu Cloud->Trouver le stockage d'objets dans tous les produits->Télécharger des images->Copier le lien

⚠️Remarque : Parfois, vous devez configurer l'anti-hotlinking si vous ne pouvez pas y accéder. pour le configurer sur Baidu.

4. Utiliser la sous-traitance

Pour en venir à notre méthode orthodoxe de résolution de la limite de taille, regardons d'abord la question soulevée au début de l'article : En plus de résoudre le problème de taille, quels sont les autres avantages de la sous-traitance ? Pour répondre à cette question, comprenez d'abord comment fonctionne le sous-package : Lorsque le mini-programme est démarré, le package principal sera téléchargé par défaut et la page du package principal sera lancée. Lorsque l'utilisateur entre dans une page du sous-package, le. le client téléchargera le sous-package correspondant et l'affichera une fois le téléchargement terminé.

Il est alors facile de répondre à la question ci-dessus : la sous-traitance du mini-programme peut optimiser le temps de téléchargement au premier démarrage du mini-programme, et peut mieux découpler la collaboration lorsque plusieurs équipes se développent ensemble.

Alors que devons-nous faire si nous voulons sous-traiter ? : Ce qui suit répertorie les méthodes de sous-package couramment utilisées pour native, uniapp et taro À l'exception des différents noms de fichiers de configuration, le code est le même pour les trois méthodes de développement. La clé est le répertoire du projet et le champ subpackages. .

Native:

// 在app.json的subpackages字段声明项目分包结构
{
  "pages":[			主包
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [	分包	
    {
      "root": "packageA",	
      "pages": [
        "pages/cat",	相对于root分包的路径
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    },
    {
        root:分包根目录
        name:分包别名,分包预下载时可以使用
        pages:分包页面路径数组,相对与分包根目录
        independent:true|false分包是否是独立分包
    }
  ]
}

uniapp:

// 在pages.json的subpackages字段声明项目分包结构
代码同原生，关键就是subpackages字段

taro:

// 在src目录下app.jsx中进行配置
代码同原生，关键就是subpackages字段

Conclusion:

points de l'applet WeChat Le packaging est en réalité une opération très simple, mais il existe de la sous-traitance asynchrone , le pré-téléchargement, la sous-traitance indépendante et d'autres connaissances doivent encore être étudiées par les patrons lorsqu'ils les réutilisent.

 Enfin, j'ai participé à ce classement annuel de popularité il y a quelque temps. En fait, je sais aussi que cette liste ne représente rien, mais le résultat final du classement 54 m'a quand même fait sentir vaniteux. Je pense que la signification de ce logo pour moi est de m'inciter à produire des articles de meilleure qualité au cours de la nouvelle année, afin que je puisse vraiment mériter ce titre. Travaillons dur ensemble, tout le monde.

Enfin, je vous souhaite le meilleur dans vos études et des progrès et réussites dans votre carrière !

【Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!