1. Введение
Скорость разработки крупномасштабных проектов, построенных на веб-пакете, очень низкая, а фронтенд-разработчики постепенно привыкли выдерживать более 100 секунд времени запуска и более 30 секунд времени перезагрузки. Даже если долгожданный webpack5 будет иметь встроенный механизм кэширования, он не будет качественно улучшен. Но десять лет назад время ожидания составляло несколько сотен миллисекунд.
К счастью, браузер поддерживает егоESM importМодульная схема загрузки, наконец, поддерживает модуляцию файла, что делает локальные сборки, больше не нужно иметь дело с модульными взаимосвязанными и совокупными файлами, которые могут даже уменьшить время сборки с 30 секунд до 300 миллисекундров.
Конечно на основеESM importСтруктура сборки более чемsnowpackОдин, и например на основе vuevite, потому что браузерная поддержка модуляризации является стандартом и не привязана ни к какому фреймворку, в дальнейшем любые инструменты сборки будут разрабатываться на основе этой фичи, а это значит, что в ближайшие пять лет фронтенд-строительство обязательно вернется к скорость десятилетней давности.Эта тенденция очевидна и определенна.
ESM importНаиболее интуитивными изменениями являются следующие три пункта:
-
node_modulesТам нет необходимости участвовать в процессе сборки вообще, и это только достаточно, чтобы повысить эффективность сборки как минимум в 10 раз. - Модульность передается в управление браузеру, для модификации любого компонента достаточно сделать однофайловую компиляцию, временная сложность всегда O(1), а время перезагрузки никак не связано с размером проекта.
- Полностью модульная загрузка браузера файлов, нет дублирования загружаемых ресурсов, этот собственный TreeShaking также может выполнять повторный доступ к файлу во время компиляции, так что уровень спроса на создание одного файла.
Так что можно сказатьESM importВ режиме повышения эффективности разработки вы можете сделать, чтобы изменить один HTML-файл с нулем десять лет назад, чтобы построить почти равную эффективность.
2 Введение и интенсивное чтение
Основные характеристики Snowpack:
- Запуск режима разработки занимает 50 мс или меньше.
- Горячие обновления очень быстрые.
- Сборка с помощью любого упаковщика, например webpack.
- Встроенная поддержка TS, JSX, модулей CSS и т. д.
- Поддержка пользовательских сценариев сборки, а также сторонних плагинов.
Установить
yarn add --dev snowpack
пройти черезsnowpack.config.jsonконфигурации файла и может быть автоматически прочитанbabel.config.jsonЭффективный плагин для Babel.
Разработка и отладка
отладкаsnowpack dev, скомпилироватьsnowpack build, автоматически начнутся сsrc/indexСкомпилировано как запись приложения.
snowpack devКоманда почти не требует времени, так как файл будет скомпилирован только по запросу при доступе к нему из браузера, поэтому скорость сборки в идеале самая высокая.
Когда браузер обращается к файлу, Snowpack преобразует файл следующим образом:
// Your Code:
import * as React from "react";
import * as ReactDOM from "react-dom";
// Build Output:
import * as React from "/web_modules/react.js";
import * as ReactDOM from "/web_modules/react-dom.js";
Цель состоит в том, чтобы сгенерировать относительный путь и запустить локальную службу, чтобы браузер мог получить доступ к этим импортированным файлам. вweb_modulesэто снежная параnode_modulesрезультат сборки.
Файлы машинописного текста также будут скомпилированы с помощью tsc или babel перед этим.
компилировать
команда компиляцииsnowpack buildСпособ по умолчанию такой же, какsnowpack devтакой же:
Вы можете быть как указано в Builder WebPack:
// snowpack.config.json
{
// Optimize your production builds with Webpack
"plugins": [
[
"@snowpack/plugin-webpack",
{
/* ... */
}
]
]
}
snowpack.config.jsonнастроитьscriptsУточнить:
{
"extends": "@snowpack/app-scripts-react",
"scripts": {
"build:scss": "sass $FILE"
},
"plugins": []
}
Например, приведенный выше синтаксис поддерживаетscssРасширения для компиляции файлов.
"build:*": "..."
Скомпилируйте расширение файла, например:"build:js,jsx": "babel --filename $FILE"указано дляjs,jsxфайлы с суффиксами для сборки babel.
"run:*": "..."
Только один раз его можно использовать для выполнения LINT или его также можно использовать с командами пакетной обработки файлов, такими какtsc: "run:tsc": "tsc"
"mount:*": "mount DIR [--to /PATH]"
Разверните файл по URL-адресу, например"mount:public": "mount public --to /"значитpublicФайлы в папке развернуты на/этот URL-адрес.
а такжеproxyAPI не перечислены один за другим. Подробнее см.официальная документация.
Мы можем понять концепцию снежного покрова из команды сборки,После компиляции исходного кода в потоковом режиме он напрямую развертывается по URL-адресу, предоставленному локальным сервером.Браузер использует основную запись для доступа кESM importспособ загрузки этих файлов.
Таким образом, вся логика загрузки и сборки выполняется по запросу, все, что нужно сделать Snowpack, — это построить локальные файлы один за другим и запустить локальную службу для вызова браузером.
Front-end разработка неотделимаnode_modules, снежный покров черезsnowpack installСпособ поддержать это.
snowpack install
Эта команда былаsnowpack devвстроенный, так чтоsnowpack installПросто для понимания принципа.
Ниже приведеныsnowpack installРезультат выполнения:
✔ snowpack install complete. [0.88s]
⦿ web_modules/ size gzip brotli
├─ react-dom.js 128.93 KB 39.89 KB 34.93 KB
└─ react.js 0.54 KB 0.32 KB 0.28 KB
⦿ web_modules/common/ (Shared)
└─ index-8961bd84.js 10.83 KB 3.96 KB 3.51 KB
можно увидеть,snowpackОбход исходного кода проектаnode_modulesдоступ, иnode_modulesВеб-версияinstall, можно считатьnpm installзаключается в том, чтобы установить пакет npm локально, иsnowpack installбудуnode_modulesустановлен в веб-API, поэтому эту команду нужно создать только один раз,node_modulesОн становится статическим файлом ресурсов, который может быть загружен браузером по запросу.
При этом ссылки на пакеты npm в исходном коде будут преобразованы вweb_modulesСсылка на этот адрес статического ресурса:
import * as ReactDOM from "react-dom";
// 转换
import * as React from "/web_modules/react.js";
Но в то же время видно, что у Snowpack высокие требования к экологии фронтенда, если какие-то пакеты имеют какие-то магические маппинги, настроенные через алиасы webpack, их нельзя напрямую мапить через путь к файлу, поэтому потребуется Экосистема Snowpack созреет еще некоторое время, но стандартизация модулей должна стать тенденцией.Канонический пакет будет постепенно упраздняться в течение следующих нескольких лет.
Подходит ли снежный покров для 2020 года?
Ответ заключается в том, что он еще не подходит для использования в производственной среде.
Конечно, использовать его в среде разработки все же можно, но есть три риска:
- Разработка и производственная среда для создания риска непоследовательных результатов.
- Экологическое существование проекта неESM importРиск больших затрат на адаптацию из-за модульных пакетов.
- В проекте много волшебной магии плагинов webpack, что приводит к риску потери пользовательской логики упаковки после стандартизации.
Но видно, что причины этих рисков все нестандартизированы. Когда мы смотрим на адаптацию и совместимость нестандартизированных API браузеров в 2020 году, нам может показаться невероятным, зачем нам бороться с этим устаревшим и нестандартизированным синтаксисом; почему во многих проектах много волшебной пользовательской логики сборки, очевидно, достаточно стандартизированной логики сборки: P.
Таким образом, мы должны увидеть тенденцию будущего, но и понять существование нынешней проблемы, не спешите использовать эко, но зрелые, но и следить за темпом нормализации фронта, чтобы идти в ногу с ритмом В конце концов, в конце концов, принесите режим BUNDLELESELELES, повышение эффективности развития очень очевидно.
3 Резюме
Разработка внешнего интерфейса достигла этой точки в 2020 году, спецификация кода была в основном стабильной, а работа, которую необходимо выполнить в области проектирования, постепенно сместилась с добавления новых функций на повышение эффективности НИОКР, Таким образом, повышение скорости горячего обновления и скорости строительства во время разработки первоочередной задачей является текущая передняя часть.
Беспакетное решение, представленное Snowpack, безусловно, имеет светлое будущее, и эффективность его построения очевидна.Команды фронтенда с достаточным количеством сотрудников и гибкие небольшие команды, которым не нужно учитывать совместимость с браузером, уже начали практиковать решение без пакетов. .
Однако для больших команд, чей бизнес должен быть совместим с различными браузерами, текущее решение без пакетов может использоваться только в среде разработки, а рабочая среда по-прежнему должна быть упакована с помощью веб-пакета, поэтому экосистема веб-пакетов может продолжать процветать для несколько лет, пока большая фронтенд-команда не откажется от него.
Если вы посмотрите на следующие десять лет, скрипты инженерной сборки переднего плана могут не понадобиться, и браузер может напрямую запускать исходный код. На данный момент режим без пакетов, представленный снежным покровом, действительно сделал большой шаг вперед.
Адрес обсуждения:Интенсивный «снежный покров» · Выпуск # 252 · DT-FE / Weekly
Если вы хотите принять участие в обсуждении, пожалуйста,кликните сюда, с новыми темами каждую неделю, выходящими по выходным или понедельникам. Интерфейс интенсивного чтения — поможет вам отфильтровать надежный контент.
Сфокусируйся наАккаунт WeChat для интенсивного чтения в интерфейсе
Заявление об авторских правах: Бесплатная перепечатка - некоммерческая - не производная - сохранить авторство (Лицензия Creative Commons 3.0)