Говоря о фронтенд-инжиниринге

Это 9-й день моего участия в ноябрьском испытании обновлений, подробности о событии:Вызов последнего обновления 2021 г.

Фронтенд-инжиниринг, когда многие люди слышат это слово, думают, что этоwebpack; Исходя из текущих условий, эту идею нельзя назвать ошибочной, но она и не очень верна, ведь концепция фронтенд-инжиниринга болееwebpackнамного больше.

Я полагаю, что многие из вас слышали слово, называемоеwebApp, широко известное как веб-приложение, его предшественник, называемыйwebPage, веб-страница. По мере обновления браузеров и выпуска новых функций HTML5 люди начинают надеятьсяwebPageДолжен иметь более мощные функции и более интерактивную поддержку. Затем появилось много новых концепций, таких как前端路由,离线应用,webSocket,前端存储、前端数据库（indexeddb）, так же много новых фреймворков,Vue,React, что также требует, чтобы фронтенд-инженеры осваивали все больше и больше технологий и становились все более и более сложными. Для более качественной разработки фронтенд-приложений инженерный образ мышления, похоже, стал общей тенденцией фронтенд-направления.

Фронтенд-инжиниринг, что это значит?

Лично я считаю, что фронтенд-инжиниринг в основном будет включать в себя следующие направления

• Технический отбор

  JS方面：Два основных фреймворка фронтенд-разработкиVue,React, как команда выбирает, какой фреймворк для себя больше подходит — это вопрос, над которым стоит подумать. Необходимо полностью учитывать исходя из бизнеса и среды, в которой вы находитесь. Вообще говоря,ReactОн будет больше подходить для крупномасштабных проектов, поскольку позволяет разработчикам участвовать в более высокой степени с точки зрения оптимизации производительности, но также требует от разработчиков более глубокого фундамента; иVueБолее подходящийwebApp, подходит для приложений с многочисленными и сложными пользовательскими взаимодействиями иVueотносительноReactНапример, стоимость обучения будет ниже;

  构建工具方面： webpackСейчас это мейнстрим, с очень богатыми функциями и очень активным сообществом, поэтому нет сомнений, что это первый выбор; но теперь есть и относительно высокие голоса.viteпоявляется (см. эту статью:Реализовать простую версию разработки vite), поскольку браузер отвечает наESMвстроенная поддержкаviteПревзойдет или даже заменит в кузове?webpack, об этом тоже надо подумать, но тут есть еще очень важный момент, инженерное сооружение требуетстабилизировать, нельзя тратить слишком много времени на неосновные дела

• создание политики

  Масштабный проект должен разрабатываться совместно несколькими людьми.Поэтому необходимо формулировать единые спецификации.Иначе у каждого свои форматы и спецификации.Сопоставима ли эффективность этих десяти человек с эффективностью здоровой и полной тройки? масштабный проект?Команда – это проблема.

  开发规范：,Можно использоватьEsLintиметь дело с

  提交规范：,Можно использоватьhusky + commitlintиметь дело с

  注释规范：, можно использовать равномерноjsDoc

  ...так далее

• Тестируйте, развертывайте, отслеживайте

  С точки зрения тестирования, это может относиться больше к самопроверке кода.Как позволить участникам проекта выполнить самопроверку кода в максимально возможной степени, также следует учитывать (я не думал об этом).

  Развертывание здесь временно делится на: развертывание среды разработки и развертывание выпуска рабочей среды.

  На этапе разработки, как позволить участникам более эффективно и просто выполнять развитие бизнеса, например создание визуальных страниц, поддержка MockServe и переключение нескольких сред (тест, uat, prod)

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

• оптимизация производительности

  Производительность рендеринга: как мы все знаем, операция js на Dom приведет к перерисовке страницы, поэтому, когда мы пишем код, мы должны свести к минимуму работу Dom.Vue,ReactЭти проблемы были в основном рассматриваются; для длинных списков и многоэтажных страниц, ленивая загрузка или нагрузка на пейджинг.

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

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

• рефакторинг

  С развитием бизнеса может встречаться и рефакторинг, от предыдущегоSPAрежим, который, возможно, потребуется преобразовать вMPAМногозаходная, многомодульная форма;

резюме

Поэтому фронтенд-инжиниринг включает в себя множество вещей,webpackЭто просто мост, который может сделать инженерию лучше.技术选型,制定规范,部署,性能优化,网络优化В принципе, это может быть отражено в конфигурации webpack.