Ян Ичжэнь, группа поддержки платформы технологического отдела WeDoctor, самой открытой фронтенд-команды во вселенной~
Эта статья служит каталогом этой серии и будет постоянно обновляться.
содержание
О компании WeDoctor
WeDoctor — ведущая международная интеллектуальная цифровая платформа здравоохранения со штаб-квартирой в Ханчжоу. WeDoctor, с миссией «здорового и надлежащего, легкого лечения», в течение последних десяти лет стремится продвигать оцифровку и интеллектуальность медицинской и медицинской промышленности Китая с помощью инноваций и технологий, предоставляя высококачественные, эффективные и доступные медицинские услуги. и медицинские услуги для всего общества, защищающие миллиарды здоровых людей.
Министерство медицины, техническое отделение, в настоящее время 90+ небольших партнеров на 90+, отвечающих за полный спектр микро медицинских групп, все стеки, все сцен, основные технические стеки Vue (SSR), реагируют (RN), Узел (BFF), пропагандирующие инженеры культуры, изучите ограничение по технологии, привержены принять хорошие изменения в медицинском здоровье!
Программа серии колонок
Зачем делать серию столбцов
- Мозговой штурм с несколькими людьми, исследование всей системы и выходных данных, улучшение технической атмосферы
- Обобщение лучших внутренних практик, повышение общего уровня компании и предоставление обратной связи по структуре
Время окончания
- Планируется закрыть к концу июня (Q2)
Почему строить систему
Интервью - слабое место
опубликовать несколько вопросов интервью
- Давайте поговорим о методах оптимизации веб-пакета и поговорим о том, как вы знакомы с методами оптимизации.
- Принцип древовидной тряски, случаи побочных эффектов и разная производительность в роллапе и вебпаке
- Принцип упаковки веб-пакета и то, как продукт выполняется, динамически загружается, как кэшируется и чем отличается от роллапа.
Помимо нашего ежедневного развития, детали этой части обычно используются реже, поэтому очень легко коснуться слепых знаний без систематического обучения ~
Вся система относительно большая
Я считаю, что многие люди пытались изучить webpack раньше, но всегда забывают (на официальном сайте много документов), осваивать систему долго и кропотливо, да и запомнить ее непросто.
В то же время автору легко написать эту серию незаконченной, потому что требуется много времени на исследование и изучение, но она особенно подходит для нашего коллективного исследования и вывода.
Инфраструктурный фундамент
содержит
- проект оптимизации
- Инженерные возможности
- Принцип составления
- Схема архитектуры
Будь то улучшение процесса или эффективности, это резерв технических возможностей, которого команда не может избежать.
Содержимое столбца
ps.Сотрудничество нескольких человек, разделение труда по модулям,В связи с ростом бизнеса график не соответствует действительности, поэтому статьи могут выпускаться не в последовательности., но каждая статья самостоятельна и не влияет на впечатления от чтения, вы также можете сначала собрать ее, а затем начать читать с нуля.
Вся колонка будет в основе расширяться до webpack5, vite, rollup, анализа основных принципов фреймворка для достижения своих собственных и, наконец, изучения некоторых из наших лучших практик и уровня архитектуры.
- Построить фундамент: Представляем самые популярные инструменты на данный момент
- постепенно углубляться: Принципиальный анализ и простая реализация соответственно
- построить систему: Анализ общих моментов и сравнение различий для уточнения всей системы построения.
- Интернализация реального боя: Лучшие практики компании и практические исследования
что вы можете получить от этого
Студенты на разных этапах могут извлечь выгоду
- развивать познание: Четкое понимание того, что такое сборка, зачем она создается и чем отличаются разные инструменты сборки.
- Знание интервью: Свежайший принципиальный анализ, какие этапы проходил весь процесс строительства и что делали?
- Самый быстрый способ начать: Быстро создавайте и оптимизируйте решение для сборки, берите пример конфигурации и используйте его.
- Инфраструктурный резерв: Предоставьте несколько случаев, когда вы ступили на яму, внутреннее исследование компании, возможно, это вас вдохновит, добро пожаловать на обсуждение.
построить историю
Каменный век
Здесь указано, что этот узел еще не стал популярным, в то время роль внешнего интерфейса в основном заключалась в нарезке динамических эффектов.
В чуть более сложном сценарии наш бизнес-код (js, css) будет сжат вручную с помощью инструмента сжатия кода (онлайн-версия есть на этом сайте), запутывая версию, похожую на jquery.min.js, и, наконец, помещая ее на CDN, на этот раз только ручная интеграция и упаковка продуктов.
Мы реализуем первоначальную концепцию модульности с помощью выражения немедленно вызываемой функции (IIFE),Избегайте загрязнения глобальной среды выполненияИспользовать какие-то сторонние модули, но порядок зависимостей и конфликты между ними все равно есть.
В это время естьДесенсибилизация кода и уменьшение объемаКонцепция, однако, у нас все еще естьМного ручных отделочных работ, поэтому нам нужна простота использования; смодульныйКонцепция чего-либоразъединение.
Бронзовый век
AMD и CMD - посторонние, относятся к Modular
Браузеры не могут использовать commonjs, поэтому две модульные спецификации, которые заменяют его, — require.js (AMD) и Sea.js (CMD). Использование этих двух решений может помочь нам эффективно разделить код, организовать код и сделать еще один шаг вперед в исходном грубом модульном способе, который родилсяЗависимость и структураКонцепция чего-либо.
Это очень важная болевая точка, влияющая на структуру расслоения.
сельскохозяйственный век
Популярность и зрелость узла приблизили строительство еще на один шаг.
На данный момент концепция передних и задних концов постепенно стала ясными, а передний конец начинает оставлять код сервера или храмочника, а также обслуживание проекта и упаковки.
Рождение NodeJS сопровождается NPM и Commonjs, «модульность» предыдущей эпохи поддерживается естественной поддержкой, с модульными концепциями различные сторонние библиотеки как пружина.
ES6
Импорт/экспорт — это модульная спецификация Esm, предложенная ES6.С охватом ES6 битва между AMD и CMD наконец-то закончена, а также ускоряется дополнительная функция пакета, компиляция (babel).
Время онлайн-компиляции слишком велико, что влияет на опыт. Можете ли вы сохранить время компиляции вПредварительная упаковкаШерстяная ткань?
Рождение упаковочных инструментов
WebPack, Grunt, Glup и т. Д., Ядро при рождении - это пакет модуля, через серию пары работоспособности.Предварительно скомпилированный и интегрированный.
Эти инструменты упаковки имеют свои преимущества в настройке: Grunt автоматизирует задачи, webpack настраивается в соответствии с возможностями, а glup — это вызов цепочки рабочих процессов.
Используются разные позы, соответствующиеэкологияНе успеть - ключевой фактор.
вебпак мощныйНизкий порог для разделения кода и конфигурацииЗаймите возвышенность.
В настоящее время пакет отвечает только за выпуск конечного продукта, и по мере развития бизнесасложность, разве вы не можете каждый раз упаковывать и развертывать его в разных средах? Несколько сценариев и несколько сред требуют больше возможностей для удовлетворения наших потребностейЭффективность разработки.
Промышленная эра - когда
Проще говоря, он инженерный, и в то же время дляОпыт, совместимость, производительность, мультисредаОжидание более высокого уровня стремления к упаковочным инструментам для постепенного модернизации.
Комбинированная NPM экосистема, это не проблема, поэтому в то время это было сказано с улыбкойинженер-конфигуратор.
Webpack развился из упаковщика модулей, и благодаря своей открытой конструкции он используется в качестве нижнего уровня многими инструментами для вторичной упаковки.
vue-cli, создать-реагировать-приложение, уми
Рост Vue и React постепенно вошел в область инструментов автоматизации, упрощая их использование и увеличивая количество конфигураций по умолчанию.Сойтись внутри инструментаУменьшите умственную нагрузку.
Охватывает все от исходного кода до сборкиЖизненный цикл, поддерживает различныеФункциональное расширение и бизнес-требования(как уми).
rollup
С ES6 конфигурация в стиле хуков легче, а эффект TreeShaking лучше.Текущая разработка нашей компании sdk и библиотеки инструментов заключается в том, чтобы использовать их для быстрой жизни.
будущее - расслоение
витэ, снежный покров
Терминал приближает фронтенд к пользователю, и его прогресс определяет прогресс фронтенда Браузер уже поддерживает ESM (атрибут type скрипта установлен в module), и мы можем сразу выйти (отличается от посередине) более счастливо.Что значит прямо? Загружайте по требованию и декомпилируйте ES6 в максимально возможной степени!
Однако из-за проблем с совместимостью мы по-прежнему не можем использовать ESM непосредственно в производственной линии (см. конкретный бизнес-сценарий) и, в конечном счете, должны быть упакованы (Vite также использует объединение в производственной среде), я считаю, что эта проблема будет решена в будущее (http2, итеративный прогресс терминала).
Некоторые из наших проектов также начали использовать vite, и плавный запуск и скорость горячего обновления потрясающие.
module federation
webpack5 имеет убийственный ход дляМодули делятсяПереваривайте задачу компиляции заранее, компилируйте и используйте аналогичную DLL и выполните в проекте. Лучше сказать, что лучше улучшить скорость упаковки.облако«Концепция кода, которая является абстракцией для всех приложений,Повторное использование в бизнесе, микроинтерфейсПодождите, пока сцена оставит много места для воображения.
Суммировать
Суммируйте основные факторы эволюции на протяжении 10 лет быстрой разработки интерфейса:
Быстрее
- Способ упаковки
- прямая загрузка
меньше
- Разделить детализацию
- Оптимизация
проще в использовании
- Экологически богатый
- Настроить интеграцию
Эпилог
Причина, по которой историческая эволюция строительства представлена в начале, заключается в том, что я надеюсь, что вы видите, что с развитием всей передовой технологии проблемы, с которыми мы столкнулись, и отличные решения оказали огромное влияние на нашу технологию.
Задайте небольшой вопрос, какой инструмент сборки вы используете сейчас, с какими проблемами вы столкнулись, добро пожаловать на обсуждение в комментариях.
Немедленно добавьте нас в закладки, чтобы увидеть всю серию колонок ~
Не забудьте прокомментировать мое качество после прочтения, поставить лайк, подписаться, переслать, прокомментировать