автор:sky-ADMIN
Обзор
Во второй половине 2019 года, чтобы перенести Didi Chuxing на вход Wechat Wallet/Alipay Jiugongge в апплет, команда провела большое количество функциональных обновлений и дополнений апплета. На протяжении всего процесса также возник ряд проблем и проблем, которые были преодолены, особенно заметной проблемой был объем пакета. Далее я подробно расскажу об усилиях и ускорении апплета Didi Chuxing с точки зрения регулировки громкости.
задний план
Требования WeChat к объему пакета мини-программы заключаются в том, что общий объем не должен превышать 12М, а объем основного пакета и отдельного подпакета не должен превышать 2М. Хотя метод расчета Alipay для объема пакетов небольших программ немного отличается от WeChat, в целом он аналогичен.
С 2018 по начало 2019 года бизнес, осуществляемый в апплете Didi Chuxing, сводился только к перевозке автомобилей, а бизнес-спрос был небольшим, и его можно было удовлетворить в основном пакете. Во второй половине года, чтобы перенести вход WeChat Wallet/Alipay Jiugongge в мини-программу, мини-программа начала добавлять множество бизнес-направлений, таких как автобус/водитель/автомобильная одежда/велосипед/езда, а также потребности бизнеса. онлайн-заказ автомобилей также требуется. Выполняя полный комплект, объем бизнеса и объем кода резко возрастут.
Didi Chuxing включает в себя широкий спектр туристических услуг, в том числе экспресс / специализированный автомобиль / такси / роскошные автомобили / совместное использование автомобилей / велосипед / водитель / автостоп / автобус / автомобильная жизнь и многие другие направления бизнеса. Наиболее важной частью всего апплета Didi Chuxing, наиболее часто используемыми страницами являются домашняя страница и страница сведений о заказе.Домашняя страница содержит выражение спроса для каждой бизнес-линии, а страница сведений о заказе каждой бизнес-линии содержит конкретные логика отображения заказа на поездку. Кроме того, есть различные функциональные страницы, такие как личный центр, маркетинговая страница, настройки, исторический маршрут.
Согласно продуктовой логике Didi Chuxing, логика выражения спроса всех бизнес-линий переносится на домашнюю страницу.Для удобства переключения на главной странице используется одностраничное верхнее руководство для отображения бизнес-линий. То есть каждая бизнес-линия предоставляет компонент выражения спроса на домашней странице, и когда пользователь переключает бизнес-линию верхней направляющей, соответствующий компонент бизнес-линии отключается.
При таком дизайне логика выражения спроса всех бизнес-линий сосредоточена на одной странице домашней страницы, что приводит к быстрому росту основного пакета, несущего домашнюю страницу, в процессе бизнес-итерации, который вскоре касается единого пакета апплета. Верхний предел в 2 М создаст огромные препятствия для последующей бизнес-итерации и развития. Таким образом, контроль размера пакета является серьезной проблемой, с которой мы сталкиваемся в процессе разработки апплета.
контроль громкости
Ниже мы представим ряд методов управления оптимизацией для объема пакета мини-программы в ходе итеративного процесса разработки мини-программы Didi Chuxing.
Основные методы оптимизации
Для небольших программ к основным методам оптимизации объема пакета относятся: сжатие ресурсов/удаление избыточности кода/ресурс CDN/асинхронная загрузка
В веб-разработке веб-пакет предоставляет большое количество возможностей оптимизации кода, включая анализ зависимостей, дедупликацию модулей, сжатие кода, встряхивание дерева, побочные эффекты и т. д. Эти возможности могут легко завершить работу по сжатию ресурсов и удалению избыточности кода. Апплет Didi Chuxing основан на платформе апплета Didi с открытым исходным кодом Mpx (github.com/didi/mpx) для разработки компиляция и построение фреймворка Mpx полностью основано на webpack, что совместимо с внутренней экологией webpack.Естественно вышеперечисленные возможности можно использовать для оптимизации размера пакета.
Апплет поддерживает загрузку некоторых статических ресурсов (таких как изображения и видео) с использованием адреса CDN. Мы попытаемся сжать соответствующие ресурсы и поместить их в CDN, чтобы эти ресурсы не занимали размер пакета.
В сценарии апплета невозможно легко выполнить асинхронную загрузку через тег script в Интернете, но платформа апплета поддерживает схему загрузки подпакета для достижения этой возможности.Поскольку загрузка подпакета является технической спецификацией, уникальной для небольших программ, веб-пакет Поддерживать напрямую не может, поэтому фреймворк Mpx имеет хорошую поддержку адаптации для этой технической спецификации.Мы подробнее остановимся на применении этой возможности позже.
Кроме того, инфраструктура Mpx также провела большую работу по адаптации объема пакета для сценариев с небольшими программами, например, максимально уменьшила размер пакета, занимаемого средой выполнения фреймворка (56 КБ после сжатия), и выполнение по требованию на страницы/компоненты, на которые ссылаются, упаковать и собрать, объявить общие стили для повторного использования стилей, извлечь общие модули в подпакеты и т. д.
При поддержке этих возможностей фреймворка Mpx можно собрать предварительно оптимизированный небольшой пакет программ без дополнительной настройки.
Существует также аналогичная опция «Автоматически сжимать и обфусцировать код при загрузке кода» в параметрах инструментов разработчика WeChat.Однако при загрузке кода в инструментах разработчика расчетный объем является непосредственно рассчитанным объемом кода текущего проекта, а не на основе сжатый объем. Поэтому, если вы используете собственные апплеты для разработки, ваш исходный код, скорее всего, будет дополнительно сжат для экономии места.
Объем анализа
Несмотря на то, что платформа обеспечивает множество оптимизаций управления громкостью, мы обнаружили, что объем основного пакета все еще слишком велик с итерацией бизнеса.
После столкновения большого объема основной сумки нам нужно выяснить, что находится в главной сумке? Почему они такие большие?
Учащиеся, использующие собственные апплеты или другие среды разработки, не основанные на веб-пакетах, могут увидеть размер файла на жестком диске только после того, как столкнутся с этой проблемой. В результате соотношение размеров каждого модуля может быть не интуитивно понятным. И мы можем использовать плагин веб-пакета, такой как webpack-bundle-analyzer, для проведения вспомогательного анализа.
Например, это демонстрация, написанная с использованием фреймворка Mpx черезnpm run build --reportВы можете увидеть такой интерфейс:
Вы можете видеть, что этот демонстрационный проект состоит из сторонних библиотек, таких как moment/lodash/socket-weapp/core-js. Также можно четко увидеть размер и взаимозависимость каждой библиотеки.
Для апплета Didi Chuxing тоже можно увидеть аналогичную картину, и можно посмотреть, из каких кодов состоит весь проект.
Кроме того, разработка интерфейса Didi Chuxing всегда основывалась на «компиляции исходного кода», так что только одна копия общедоступных зависимостей во всем проекте может быть реализована и совместно использована. Короче говоря, это также помогает уменьшить размер кода проекта.Информация по теме: https://github.com/DDFE/DDFE-blog/issues/23
Чтобы полностью использовать эффект компиляции исходного кода, необходимо установить весь набор экологии компиляции исходного кода вместе.Например, когда проверяющая сторона основного проекта объявляет общедоступные зависимости, она должна использовать peerDep или devDep для объявления некоторые общедоступные зависимости. Эти общие зависимости должны быть в основном проекте. Сделайте унифицированное заявление, чтобы избежать установки двух общедоступных зависимостей из-за разных версий, что увеличит размер. Поскольку апплет Didi Chuxing включает в себя множество бизнес-направлений и команд, некоторые команды могут не знать об этом, поэтому в коде действительно могут возникать вышеупомянутые сценарии ухудшения. Согласно диаграмме анализа, такого рода проблемы можно легко найти, и соответствующую команду можно подтолкнуть к удалению этих повторяющихся зависимостей.
В то же время, согласно диаграмме анализа объема, мы сосредоточились на анализе больших файлов, провели раунд сортировки и упрощения бизнес-кода, удалили некоторые бесполезные коды и упростили файл описания тела сообщения веб-сокета.
Настройка субподряда
Субподряд - это программа, похожая на веб-асинхронное введение, данное апплетом.Некоторые страницы, которые не нужны при первоначальном входе, могут быть помещены в субподряд, и субподряд будет загружен при переходе на соответствующую страницу, и эти страницы и их филиалы будут Размещение ресурсов в подпакетах может эффективно уменьшить размер основного пакета.
Платформа Mpx обеспечивала предварительную поддержку спецификации субподряда в первые дни, а правила доступа к ресурсам остаются совместимыми с WeChat.Он в основном основан на каталоге, в котором хранятся ресурсы, чтобы определить, должен ли вывод выводиться в основной пакет или субподряд. После того, как у нас появилась эта возможность, мы передали страницу маршрута в субподряд, что, вероятно, сэкономило более 200 КБ места.
После того, как страница маршрута успешно разделена, мы начинаем передавать все коды, не относящиеся к домашней странице, такие как выбор начальной и конечной точки и личный центр. И доступ к некоторым бизнес-направлениям осуществляется через npm.Также мы пытаемся передать все коды этих бизнес-направлений, не относящиеся к домашней странице.
Здесь тоже есть отступление: благодаря раннему дизайну схемы объединения бизнеса в виде пакетов компанией mpx бизнесу очень удобно развиваться самостоятельно и легко интегрироваться. Затем я обнаружил, что дизайн конфигурации json подпакета WeChat очень похож на дизайн пакетов.На этом основании подпакет WeChat поддерживается.На стороне пользователя нужно только добавить запрос на основе исходных пакетов, чтобы отметить имя подпакета.
После демонтажа каждого субподряда общая структура проекта выглядит примерно следующим образом:
После того, как первоначальная работа по субподряду была завершена, в общей сложности около 400 КБ пространства было удалено из основного пакета в субподряд.
Уточнение управления ресурсами субподряда
Как упоминалось выше, правила обработки субподряда на начальном этапе платформы Mpx заключаются в том, чтобы собрать ресурсы по пути субподряда в субподряд полностью в соответствии с методом WeChat. Поскольку все ресурсы, которыми управляет npm, находятся в каталоге node_modules и не принадлежат ни одному из путей подпакета, все они будут собраны в основной пакет.
Например, до того, как у нас была субподрядная страница маршрута, все хранилище управления состоянием страницы маршрута находилось под путем субподряда страницы маршрута, и оно могло быть собрано в субподрядной странице маршрута. Страница маршрута также использует упакованную библиотеку didi-socket.Эта библиотека является общедоступным пакетом npm.Даже если она используется только в подпакете страницы маршрута, поскольку ее собственный путь находится в node_modules, она будет собрана в основной пакет. .
Из-за некоторых ранних разработок ресурсы страницы маршрута и домашней страницы разделены, и все они существуют независимо по своим собственным путям.Основной частью процесса субподряда на первом этапе также является страница маршрута, которая просто соответствует начальное разделение Mpx. Из-за характеристик обработки пакетов его лучше собирать и группировать на странице процесса.
В качестве деловой итерации доступом к последующей линии трафика выполняется NPM, будет большое количество ресурсов пакетов NPM, и все они находятся в каталоге Node_Module, поэтому все будут собираться в Master.
Итак, фреймворк Mpx претерпел ряд преобразований:
- В процессе сбора зависимостей сборки мы будем отмечать собранные зависимости и записывать, какими подпакетами они были введены. После импорта только одного подпакета он будет экспортирован в этот подпакет.
- Мы будем автоматически генерировать cacheGroups для каждого подпакета в SplitChunksPlugin в соответствии с определенной пользователем конфигурацией подпакета и извлекать модуль мультиплексирования в подпакете в пакет под подпакетом.
- Для компонентов и статических ресурсов, если на них ссылаются несколько подпакетов и на них нет ссылок в основном пакете, для обеспечения оптимального объема основного пакета будет создано несколько копий этих ресурсов и выведено в соответствующие подпакеты, не занимая Объем основной упаковки.
Таким образом,Независимо от того, где ресурсы, указанные в подпакете, изначально расположены, они будут выводиться в каталог подпакета dist в максимально возможной степени в конечном выводе, чтобы не занимать основное пространство пакета..
После этого изменения структура проекта кажется такой же, как и раньше, но благодаря обновлению способности Mpx обрабатывать субподрядные ресурсы мы можем успешно экспортировать ресурсы npm, указанные в субподряде бизнес-линии, в каталог субподряда, где он находится.
план покрытия
Позже апплет Didi Chuxing должен был заменить исходную запись WebApp в WeChat/Alipay.Бизнес-линии, к которым обращался апплет, быстро увеличивались, и объем пакетов быстро увеличивался.
Основная причина роста этой части объема была упомянута ранее, все бизнес-линии должны быть подключены к главной странице для отображения. Это также определяется характеристиками бизнеса.Didi Chuxing предлагает множество линеек туристических продуктов, включая экспресс / специализированные автомобили / такси / автомобили класса люкс / совместное использование автомобилей / велосипеды / водители / попутный ветер и другие продукты, пользователям может потребоваться переключиться и выбрать неоднократно . Этот процесс также сохраняет такую информацию, как начальная и конечная модели.Это должен быть компонент переключения на странице плюс набор очень сложного крупномасштабного управления состоянием для достижения более гладкой и плавной реализации. Вместо разделения различных функций на разные страницы, как на некоторых платформах электронной коммерции / информационных платформах, позволяющих пользователям входить на подстраницы через меню на главной странице, а затем выполнять операции.На главной странице есть только вход и меньше бизнес-логики. ..будет намного проще.
Следовательно, каждая бизнес-линия должна предоставлять компонент домашней страницы для доступа. Этот компонент будет использоваться на домашней странице, поэтому его нельзя разделить на подпакеты. Наконец, объем основной пакетной части всей домашней страницы можно разделить на две части: базовая библиотека и бизнес-код. Соотношение объемов этих двух компонентов составляет около 1М для общедоступной зависимой базовой библиотеки и около 1М для бизнес-кода.
Такая огромная базовая библиотека в основном связана с большим количеством бизнес-линий и бизнес-команд DIDI Chuxing, и у каждой стороны есть какие-то основные зависимости. Например, данный файл описания данных PB Long-Link Communication PB, который обрабатывает автомобиль, полагается, в большую библиотеку расчета чисел, что карта будет полагаться, рамочная среда CML выполняется, что прогулка потенциала, связанная с библиотекой Gateway Communication. Chauffeur опирается на библиотеку общественности и полифилл и т. Д.
Таким образом, проблемы, с которыми столкнулся апплет Didi Chuxing, не могли быть быстро решены чисто техническими решениями в то время, поэтому мы сделали корректировку инженерной структуры, которую можно назвать решением титульной страницы, которая решила основную проблему пакета.
План обложки состоит в том, чтобы просто сделать обложку с логотипом Didi Chuxing в качестве начальной страницы, и как только страница будет загружена, она сразу же перейдет на другую страницу.Эта страница фактически несет бизнес и помещается в субконтракт.
Значение этой операции в том, что в основном пакете остаются только базовые фреймворки/библиотеки, от которых зависят все стороны, а весь бизнес извлекается в субконтракты.
Это структурная диаграмма проекта после того, как план обложки завершен.Большая часть бизнес-логики домашней страницы была извлечена в субподряд домашней страницы.
Результатом такой операции по смещению является то, что у нас может быть основной пакет размером 2 млн для проезда и размещения базовой публичной библиотеки, а также подпакет около 2 млн для использования вышеупомянутого Didi Chuxing, который объединяет различные сервисы. Большой дом». В то время было почти 1,2 млн основных пакетов и более 800 тыс. основных субподрядных работ.
Лучшая часть этой трансформации заключается в том, что рост объема, вызванный последующими бизнес-итерациями, почти полностью приходится на основной бизнес-субподряд, а оставшиеся 1,1 млн + пространство по-прежнему относительно избыточны для бизнес-итераций. Объем основного пакета может долгое время оставаться неизменным в идеальных условиях, а постоянное развитие потребностей бизнеса не приведет к тому, что объем основного пакета будет многократно превышать нормативный, и не нужно беспокоиться об объеме основного пакета.
Конечно, мы можем видеть, что сама программа не уменьшает громкость, а немного меняет положение. Кроме того, титульная страница этой программы на самом деле имеет некоторые недостатки, такие как медленный выставочный бизнес, потому что вы хотите загрузить контент, становится больше, но сама программа имеет мало возможностей для лучшего кэширования ресурсов, поэтому вполне приемлемо.
По сравнению с размером проблемы из-за итераций доступа к застрявшему спросу и линейки продуктов, по крайней мере, в настоящее время эта программа решает любые проблемы. Мы следим за командой разработчиков, которая будет продолжать следить за объемом интереса, чтобы увидеть, будут ли изменения или сам апплет программ продукта дает некоторые решения для дальнейшей оптимизации этого раздела.
Суммировать
кадр МпксБыла проделана большая работа по управлению громкостью пакетов, и это обеспечило очень полную поддержку небольших программных подпакетов в сценариях npm.
На основе поддержки фреймворка команда апплета Didi Chuxing путем сортировки бизнес-зависимостей, полного использования субподряда, корректировки плана взаимодействия и ряда средств, не препятствуя развитию бизнеса, создала огромный и сложный пакет апплета Didi Chuxing. громкость регулируется в пределах платформы.
Я надеюсь, что эта статья может вдохновить разработчиков небольших программ, которые сталкиваются с проблемами размера пакета Добро пожаловать, чтобы оставить сообщение для связи.