Боевая малая программа (12) - загрузка субпакетов

Апплет WeChat
Боевая малая программа (12) - загрузка субпакетов

1. Ограничения мини-программ на пакеты кода

В обычных условиях при первом запуске апплета загружается весь пакет кода, поэтому, если пакет кода слишком велик, это повлияет на время первого запуска апплета. Поэтому у апплета официально есть ограничение на размер пакета кода.

1.1 Ограничения мини-программ

  1. При нормальных обстоятельствах ограничение пакета кода апплета: размер не превышает 2M, если размер превышает этот размер, его нельзя просмотреть и код нельзя загрузить.
  2. В случае подпакетной загрузки ограничение составляет: размер каждого пакета не превышает 2M, а общий размер всех пакетов не превышает 16M.

1.2 Как проверить размер пакета кода

Нажмите в правом верхнем углу инструмента разработчика WeChat — Подробности, внизу вы увидите размер пакета кода, включая размер пакета локального кода, размер пакета кода последнего предварительного просмотра и размер пакета последнего загруженного кода:

Если субподряд настроен, щелкните стрелку раскрывающегося списка, чтобы увидеть размер каждого субподряда:

2. Как решить проблему, что пакет кода слишком велик

2.1 Загрузка подпакета

Загрузка подпакетов — это решение, официально предоставленное WeChat.Вся идея заключается в следующем:Разделите код на разные пакеты, откройте определенную страницу в пакете и загрузите код этого пакета, чтобы оптимизировать время загрузки при первом запуске апплета.

Есть несколько моментов, на которые следует обратить внимание в отношении субподряда:

  1. Используйте подпакеты для объявления пути к подпакету, и каталоги за пределами пути конфигурации подпакетов будут упакованы в основной пакет.
  2. Путь, настроенный в tabBar, должен быть помещен в основной пакет.
  3. Ресурсы между разными подпакетами не могут ссылаться друг на друга, но могут ссылаться на ресурсы в основном пакете.

2.2 Хранение статических ресурсов на сервере

Например, ресурсы изображений, используемые в проекте, хранятся на платформе изображений или на выделенном сервере статических ресурсов, чтобы уменьшить пространство, занимаемое пакетом кода. Этот метод выходит за рамки обсуждения в этой статье, поэтому я пока не буду вдаваться в подробности.

В-третьих, операция под нагрузкой твердого тела

Ниже приведен пример субподряда:

3.1 Разделите страницы проекта по определенной логике

Этот шаг можно разделить по бизнес-логике проекта или по частоте использования разных страниц. В этом примере страницы, отличные от tabBar, напрямую разделены на подпакеты:

// tabBar(放入主包)
"pages/index/index",
"pages/logs/logs"

// packageA(分包)
"pages/parent/parent",
"pages/child/child"

3.2 Настройте путь в app.json

Настройте свойство подпакетов, значением которого является массив. Каждый объект в массиве является подпакетом. В каждом подпакете необходимо настроить несколько свойств:

  1. root: корневой путь этого подпакета
  2. Страницы: путь к странице в этом подпакете, где путь к странице является относительным путем к корневому пути подпакета.
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
	"subpackages": [
    {
      "root": "pages/packageA",
      "pages": [
        "child/child",
        "parent/parent"
      ]
    }
  ],
}

3.3 После сохранения страницы сгенерируйте соответствующий каталог файлов

После настройки файла app.json и его сохранения вы обнаружите, что соответствующий каталог создается автоматически, как показано ниже:

Следует отметить, что во вновь созданном каталоге файлы находятся в состоянии инициализации, но родительский и дочерний файлы исходного пути все еще существуют, и код необходимо мигрировать вручную.

3.4 Перенесите соответствующий код во вновь созданный каталог файлов

На этом шаге перенесите код файла исходного пути во вновь созданный каталог и удалите файлы исходного пути.

3.5 Изменение путей, используемых в проекте

На данный момент, по сути, субподряд настроен, но остается решить одну проблему: Измените ссылочный путь в проекте, например: Исходный ссылочный путь выглядит так

gotoChild() {
    wx.navigateTo({
      url: '/pages/child/child',
    })
}

Необходимо изменить на последний путь:

gotoChild() {
    wx.navigateTo({
      url: '/pages/packageA/child/child',
    })
}

Мы фронтенд-программист + фронтенд-программист от Imperial Capital.

Публикуемые здесь статьи представляют собой резюме того, что мы узнали, и ожидается, что они будут обновляться не реже одного раза в неделю.

Наш текущий учебный план:Малый программный бой => расширенное использование vue => принцип vue => основы css => es6 => углубленное изучение js

Кроме того, мы также со временем подведем итоги и обновим некоторые технологии и реализованные функции, используемые в работе.

Если статья неверна или выражение непонятно, оставьте сообщение и отзыв~~

Категории