Интенсивное чтение на этой неделе — некоторые изменения в webpack 4.0 и то, что typescript может сделать, чтобы максимально использовать все функции webpack 4.0.
1. Введение
Некоторое время назад я попробовал посылку в качестве строительного инструмента, точно так же, как сельские жители наслаждаются городской жизнью и не могут вернуться. Я обнаружил, что отсутствие конфигурации является большой тенденцией передних строительных инструментов. Это очень удобно и быстро, и я больше никогда не хочу прикасаться к веб-пакету.
Однако после некоторого периода практики я обнаружил, что пакет все еще незрелый, в основном потому, что он не поддерживает некоторые отличные функции объединения: Tree Shake, Scope Hoist, а скорость упаковки больших проектов ниже, чем у webpack3.0. Так как у автора совсем нулевая конфигурация, то когда я обнаружил, что скорость сборки резко падает, я, естественно, указал пальцем на посылку :p.
Всего несколько недель назад был выпущен webpack 4.0 с нулевой конфигурацией, и я подумал, что пришло время вернуться к webpack. Однако документов очень мало, как мигрировать?
В последние несколько дней документация вебпака выпустила версию 4.0, правда много старой документации осталось, но для ознакомления достаточно.
2 Интенсивное чтение
Я пыталсяwebpack node api, После долгих попыток я обнаружил, что я был без косточек. В документации ничегоmodeрежим, в среде 4.0compilerвсегда подсказывать нетmodeпредупреждение.
Прочитав некоторые документы, я обнаружил, что webpack4.0 энергично продвигает метод cli для запуска, в котором упоминаются наиболее важныеwebpack --modeMode, видно, что webpack4.0 более уважаем, чтобы позволить разработчикам использовать высоко инкапсулированный cli, а не использовать разработку узла (документация узла также должна быть обновлена). Я снова огляделся и нашелwebpack-dev-serverВерсия webpack обновлена до 4.0,ts-loaderТак же обновился до 4.0, тк с экологией все готово.
Используйте webpack cli, webpack-dev-server cli
Установитьwebpack^4.1.1 webpack-cli^2.0.10 webpack-dev-server^3.1.0и создайте общедоступный файл конфигурацииwebpack.config.ts:
export default {
entry,
output,
module: {
rules
},
resolve,
resolveLoader,
devServer: {
https: true,
open: true,
overlay: {
warnings: true,
errors: true
},
port
}
}
не забудьте использоватьtscпреобразовать вwebpack.config.jsкак запись кли.
Использовать в режиме разработкиwebpack-dev-server:
webpack-dev-server --mode development --progress --hot --hotOnly --config ./webpack.config.js
Использование сборки производственной средыwebpack:
webpack --mode production --progress --config ./webpack.config.js
режим разработки/производства, оба начинаются сwebpack.config.tsкак конфигурация, гдеdevServerэлемент находится только в режиме разработки, дляwebpack-dev-serverэффективный.
После включения--mode production, автоматически включит сжатие кода, подъем области действия и другие подключаемые модули, а также автоматически передаст переменные среды в пакет lib, поэтому он больше не нужен.pluginsэтот элемент конфигурации. Так же открыть--mode developmentПлагины разработки, такие как sourceMap, будут включены автоматически.Нам нужно только позаботиться об упрощенной конфигурации, что является важным изменением в нулевой конфигурации 4.0.
mode=production,mode=developmentДля конкретных встроенных конфигураций вы можете обратиться к этой статье:webpack 4, наконец, знает, что «соглашение важнее конфигурации». Что интересно, webpack4 делает это, потому что не хочет, чтобы мы тратили время на понимание этих механизмов, а сообщество должно постепенно привыкать к методу разработки без конфигурации.
Конечно, хоть и говорится, что он имеет нулевую конфигурацию, все же очень необходимо настроить базовый трехосный файл конфигурации:entry output module.
Мы также можем передать некоторые параметры в файл конфигурации, такие как настройка ввода нескольких режимов разработки, через--envперечислить:
webpack-dev-server --mode development --env.entry ./src/main.tsx
webpack.config.tsперенимать:
const entry = yargs.argv.env.entry
использовать машинопись + веб-пакет
Проще говоря, просто нужноts-loaderдостаточно. существуетwebpack.config.tsДобавить новоеrules:
{
module: {
rules: [{
test: /\.(tsx|ts)?$/,
use: ["ts-loader"]
}]
}
}
Уведомлениеtsconfig.jsonСтратегия разрешения среднего модуля использует:"module": "esnext".
Причина в том, что веб-пакету требуется оператор импорта es6 для выполнения встряхивания дерева или динамической оптимизации импорта, мы больше не разрешаемts-loaderУпорядочиваем настройки модуля, другими словами смотрим на него как в белый списокtypescriptа такжеbabel, только пусть он сделает нужную нам работу, а остальное оставьте webpack для максимальной оптимизации производительности.
Если вы используете только webpack + typescript, рекомендуется настроить режим вывода компиляции ts наes3, потому что инструмент сжатия, который поставляется с веб-пакетом, по-прежнему сообщает об ошибках синтаксиса es6 и не выполняет обработку совместимости.
используйте машинопись + babel + webpcak
Обратите внимание на порядок обработки, ts -> babel -> webpack.
Из-за лишнего бабеля отключаем режим совместимости компиляции ts:"target": "esnext", и модули также не анализируются:"module": "esnext",ts-loaderПросто конвертируйте машинописный код в js, не делайте всех остальных оптимизаций и передайте нативный код esnext непосредственно в babel для обработки.
Ответственность этого слоя Babel состоит в том, чтобы сделать код совместимым, не сжимать и не преобразовывать import в require. Автор обнаружил, что Babel не сможет напрямую обрабатывать код импорта, поэтому необходимоstage-2 preset:
{
presets: [
["env", {
modules: false,
}],
["stage-2"]
],
plugins: [
["transform-runtime"]
],
comments: true
}
Как видно из приведенной выше конфигурации, уровень babel выполняет совместимую с браузером обработку (подключаемый модуль env) над кодом esnext, который передается напрямую прозрачно.import(плагин stage-2 для Babel для распознавания esModule), а также поддержка плагина async await (transform-runtime).
Изначально я хотел использовать env для замены функции transform-runtime, автор пока не нашел подходящего способа, читатели могут его добавить.
Также разрешите Babel сохранять комментарии (comments: true), потому что импорт веб-пакета поддерживает собственное имя блока с помощью аннотации:
import(/* webpackChunkName: "src" */ "./src")
Сотрудничатьreact-loadableЛучше использовать:
Loadable({
loader: () => import(/* webpackChunkName: "src" */ "./src"),
loading: (): any => null
})
так какreact-loadableПусть страницы будут упакованы в куски, и webpack автоматически выберет общие куски, чтобы соответствовать каждому фрагменту страницы черезwebpackChunkNameОпределите имя, webpack может дать каждому общему чанку более читаемое имя, например:vendor~src,about,login, ты знаешь, что этоsrc about loginОбщие модули среди трех страниц.
Возможно, кто-то увидел недостаток и добавил в каждый файлwebpackChunkNameКомментарии громоздки и некрасивы, и пока один из разработчиков не добавит этот комментарий, в читаемых фрагментах, упомянутых выше, может отсутствовать имя модуля.
Вот что автор прочитал в предыдущей статье:Интенсивное чтение «Рекит Студио»,Проекты могут определять страницы по соглашению, а входные файлы автоматически генерируются cli., в противном случае это не только уменьшит генерацию бизнеса, но и равномерно добавитwebpackChunkNameЧто ж?
Вот строительные леса проекта, которые объединяют эту идею в рамках небольшой компании Amway.pri, используя ts+babel+webpack4.0, указанная выше небольшая оптимизация тоже является одной из встроенных функций.
Что приносит webpack4, так это существенную оптимизацию стоимости адаптации
Кажется, некоторые голоса в сообществе жалуются, webpack выпустил новую версию, и у нас очередной этап адаптации. На самом деле, webpack не требует затрат на адаптацию, проблема заключается в том, как мы используем webpack и в концепции.
Если мы начнем с веб-пакета как интегрированного решения для упаковки, используйте его для разработки и отладки.webpack-dev-server cli, среда разработки компилирует и используетwebpack cli, то webpack4 на самом деле просто дополняет наиболее важную переменную конфигурации среды разработки. аналогияparcelДве команды:
parcel index.html
parcel build index.html
соответствовать:
webpack-dev-server --mode development
webpack --mode production
Поэтому webpack4 чуть ли не самая удобная версия для использования и миграции в истории, при условии, что использование мышления правильное, и готов передать процесс компиляции двум официальным Cli.
3 Резюме
Пока typescript и babel используются разумно, каждый из них может выполнять только минимальную функцию, перебрасывать нативный модульный код в webpack, а потом взаимодействовать с--mode productionКонфигурация, веб-пакет автоматически откроет все возможные плагины для оптимизации вашего проекта, и нам больше не нужно читать все виды плагинов веб-пакета, что еще более интересно, так это то, что с обновлением версии веб-пакета оптимизация продолжится. обновление, и нам нужно только сохранить--modeпараметры, нет необходимости менять строку конфигурации.
Подводя итог, нам не нужно заботиться о конфигурации, связанной с оптимизацией, нам нужно только настроить конфигурацию, связанную с бизнесом.entry output module, это вебпак4.0.
Для того чтобы реализовать функцию открытия браузера сразу после первой компиляции я написал всего 200 строкcustomCompilerа такжеformat-webpack-message, и использовать koa для открытия сервера, использовать await и флаги для ожидания первого времени компиляции и использоватьopnБиблиотеки открывают веб-страницы.
На самом деле, использование cli требует толькоwebpack-dev-server --open.
С новой волной нулевой конфигурации компиляция и настройка действительно не должны занимать так много времени.
4 дополнения — предварительная выборка
Читатели обнаружат, что это не простое руководство по обновлению webpack 4. Если вы внимательно прочитаете его, то сможете найти некоторые идеи инженерной оптимизации, содержащиеся в тексте. В конце статьи я приведу еще одну волну преимуществ, чтобы проанализировать, что такое prefetch-оптимизация и как ее сделать.
Современные браузеры поддерживают следующие два синтаксиса:
<link rel="preload" />
<link rel="prefetch" />
Проверить на совместимостьCaniuse, автор акцентирует внимание на функции.preloadСобирать используемые в настоящее время ресурсы,prefetchСобирайте ресурсы для будущего использования.
Страница по сути является ресурсом в будущем.Если вы думаете, что пользователи будут нажимать на другую страницу (если вы не уверены в продукте, или pv слишком низкий, вы можете игнорировать эту функцию), вы можете использоватьprefetchПозвольте браузеру загрузить файл фрагмента для следующей страницы во время простоя.
Эффективность оптимизации объема интерфейсного пакета обычно противоречит пользовательскому опыту.Поскольку следующая страница находится в другом блоке, загрузка неизбежно произойдет после того, как пользователь щелкнет. Но если совместитьprefetch, вы можете иметь как рыбу, так и медвежью лапу (обычные пользователи не могут нажать кнопку, чтобы перейти на страницу непосредственно перед загрузкой страницы, поэтому единственный недостаток вряд ли затронет обычных пользователей).
С API самый большой вопрос заключается в том, как текущая страница узнает, какие фрагменты загружать? Существует два общих подхода:
полный режимиспользовать напр.preload-webpack-pluginПлагин, который обрабатывает все сгенерированные фрагменты какprefetchресурсы, на всех страницах. Проекты почти всех размеров не генерируют слишком много фрагментов, поэтому это решение не является элегантным в теории, но может решить практические проблемы.
Режим по запросу, является элегантным решением как теоретически, так и практически, в зависимости от того, чистый у вас код или нет. метод заключается в предоставлении пользовательскогоLinkЯрлыки, генерируемые по запросу на основе URL-адресовprefetchЭтикетка. Самый большой недостаток этой схемы в том, что если пользователь не использует встроенныйLink,prefetchПравила будут недействительны.
еще 5 обсуждений
Адрес обсуждения:Интенсивное чтение «Руководства по обновлению webpack4.0» · Выпуск №66 · dt-fe/weekly
Если вы хотите принять участие в обсуждении, пожалуйста,кликните сюда, с новыми темами каждую неделю, публикуется каждую пятницу.