Как пишет Лао Юань, версия v5 все еще находится на ранних стадиях и все еще может содержать ошибки. и какmajorверсия, в которой есть некоторые критические изменения, которые могут привести к тому, что некоторые конфигурации и плагины не будут работать. Но это не помешало нам опробовать новые функции в журнале изменений. Если у вас возникли проблемы, вы можетедвигайтесь сюдаДать обратную связь. Кроме того, есть много отличных статей в стране и за границей о настройке Webpack4 и общем принципе работы Компилятор->Компиляция->Чанк->Модуль->Шаблон, я не буду раскрывать их здесь по одной. На следующий день еще не рано и народу много, давай вместе займемся чем-нибудь серьезным.
Руководство по работе как тигр
- Обновите свой Node до 8 (V5 обновляет версию Node.js с 6 до 8)
- npm установить webpack@next --save-dev
- npm установить webpack-cli --save-dev
- package.json добавить "dev": "webpack --mode development"
- package.json добавить "prod": "webpack --mode production"
Начните путь раннего внедрения Webpack V5
Создайте новую папку src, а затем создайте новый index.js. просто написалconsole.log("Hello Webpack5")
1. Оценка файла дистрибутивного пакета
#激动的心 颤抖的手
npm run dev
В моем сердце нет турбулентности... 😳... Ладно, все кончено. уходи~
3 часа спустя ... Я все еще убит горем и нашел этоissuesрешать. Давайте посмотрим на сравнительную таблицу V5 и V4 после успешной эксплуатации.
V5 упакован в main.js dist
Процесс упаковки V4
Без культуры я могу только сказать, о боже! ! Размер аж в полтора раза меньше, а функция запуска просто куча раздражающих 💃
2. Беспокойство о загрузке по требованию
Раньше, когда мы хотели внутри index.jsimport(./async.js").then(...)время, если мы ничего не добавим. V4 будет генерировать кучу 0.js, 1.js, 2.js... для этих файлов по умолчанию.Как аккуратно.Так что нам нужно использоватьimport(/* webpackChunkName: "name" */ "module")чтобы разрешить это затруднение. Сегодня V5 включает новый алгоритм идентификатора блока в режиме разработки, который обеспечивает читаемые ссылки на блоки (и, следовательно, имена файлов). Идентификатор модуля определяется его контекстно-зависимым путем. Идентификаторы блоков определяются содержимым блока, поэтому вам больше не нужно использовать волшебные комментарии.
//src文件夹index.js
import("./async.js").then((_)=>{
console.log(_.data);
})
console.log("Hello Webpack5")
//src文件夹async.js
const data = "异步数据🍊";
export default data;
после компиляции сноваsrc_async_js.jsПросто валяюсь на дистанции 🌹. Если на этот раз выполнитьnpm run prodФайл js, начинающийся с цифры, появится в dist. Например, у меня 61.js, вам может быть очень любопытно, что это за чертовщина❓
3. должны быть определены идентификаторы модулей и фрагментов.
Во-первых, давайте изменим вышеуказанный файл.
//src文件夹index.js
import("./async.js").then((_) => {
console.log(_.data);
})
import("./async2.js").then((_) => {
console.log(_.data2);
})
console.log("Hello Webpack5")
//src文件夹async2.js
import common from "./common.js"
console.log(common)
const data2 = "异步数据🍎";
export default data2;
В версии V4 async.js и async2.js будут одновременно назначены chunkId. Затем сгенерированный main.js загружает соответствующий файл по chunkId, но трагедия в том, что если я удалю его в это времяimport("./async.js").then(() => {console.log(.data);})Эта строка заставит async2 подняться вверх, то есть исходная 1 станет 0, как показано ниже:
Используя BeyondCompare, мы также хорошо видим основные изменения.
Некоторые одноклассники сказали, что с этим непросто справиться, и я могу использовать Magic Comment или некоторые плагины, чтобы исправить его идентификаторы модулей и фрагментов. Да, вы правы, но V5 не нужно будет вводить никакую внешнюю силу.Как и выше, мы столкнулись с незнакомым prod JS с числами, который должен улучшить долгосрочное кэширование, добавить новые алгоритмы и использовать их в режиме производства Следующая конфигурация включен. Эти алгоритмы назначают очень короткие (3 или 4 символа) числовые идентификаторы модулям и блокам данных детерминированным образом.
//Webpack4生产环境的默认配置
module.exports = {
optimization:{
chunkIds: "deterministic”,
moduleIds: "deterministic"
}
}
//Webpack4生产环境的默认配置
module.exports = {
optimization:{
chunkIds: "natural”,
moduleIds: "size"
}
}
Если вас раздражают эти новые функции, вы все равно можете установитьoptimization: { chunkIds: 'named' }Он совместим, что является плюсом.
4. Ненавистная скорость компиляции
Скорость компиляции Webpack считается головной болью для многих студентов.Конечно, у нас также есть много методов оптимизации. Например, можно использовать HappyPack, Cache-loader, исключение node_modules, многопоточное сжатие и даже распределенную компиляцию. На самом деле, медленная компиляция Webpack также связана с его лодерным механизмом, например, string->ast->string относится кParcelЗазоры действительно есть 📦. Итак, какие изменения принесла версия V5? На самом деле вам нужно только добавить это предложение в файл конфигурации:
module.exports = {
cache: {
type: "filesystem"
}
}
На самом деле кеш в версии V4 есть, но на официальном сайте указанная выше конфигурация тоже называется экспериментальной, а также сказано, что если используется постоянный кеш, то он больше не требуется.cache-loader. То же самое касается Babel cacheDirectory и т.д. Лао Юань слишком занят, чтобы детально изучать весь PR и исходный код, но после примерного запуска он, кажется, имеет некоторый эффект.
5. Лучший способ выразить minSize и maxSize
По умолчанию в версии V4 только обработкаjavascriptразмер 😧
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: "all",
name: "commons",
minChunks: 1,
minSize: "数值",
maxSize: "数值"
}
}
}
}
}
Изменение в версии V5, это изменение просто слишком тонкое 🐒 Лао Юань попробовал его, и эффект неплох.
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: "all",
name: "commons",
}
},
//最小的文件大小 超过之后将不予打包
minSize: {
javascript: 0,
style: 0,
},
//最大的文件 超过之后继续拆分
maxSize: {
javascript: 1, //故意写小的效果更明显
style: 3000,
}
}
}
}
7. Оптимизация компилятора
Если вы читали исходный код Webpack, вы должны знать о важности компилятора, поскольку в Webpack много хуков и триггерных событий.
В новой версии компиляторы должны быть закрыты после использования, так как у них есть ловушки для этих состояний при входе или выходе из состояний бездействия. Плагины могут использовать эти хуки для выполнения менее важной работы (например, постоянное кэширование для медленного сохранения кеша на диск). Также авторы плагинов должны предвидеть, что некоторые пользователи могут забыть выключить компилятор, поэтому, когда компилятор выключается, вся оставшаяся работа должна быть выполнена как можно скорее. Затем обратный вызов уведомит о том, что он полностью завершен. При обновлении до версии 5 обязательно используйте API Node.js для вызова Compiler.close после завершения работы.
8. Полифилы Node.js автоматически удаляются
В прошлом версии Webpack 4 поставлялись с полифиллами для большинства основных модулей Node.js, которые автоматически применялись, как только какие-либо основные модули использовались внешним интерфейсом, но некоторые из них были ненужными. Попытка в V5 состоит в том, чтобы автоматически остановить полифиллинг этих основных модулей и сосредоточиться на модулях, совместимых с интерфейсом. При переходе на версию 5 лучше по возможности использовать модули, совместимые с внешним интерфейсом, и по возможности добавлять полифиллы для основных модулей вручную. Webpack призывает всех оставлять больше комментариев, так как это изменение может попасть или не попасть в окончательный выпуск v5. Теперь, когда микроинтерфейс широко используется во многих внутренних командах, Лао Юань лично считает, что это изменение более выгодно для фронтенда, чтобы больше сосредоточиться на разработке модулей.
В начале этой статьи мы привели схему изложения автора об изменениях в Webpack. каждый можеткликните сюдаувидеть все. Изменения в новой версии неизбежно вызовут проблемы со многими подключаемыми модулями, но улучшение производительности V5 — это то, чего мы с нетерпением ждем. Наконец, я хотел бы сказать, что боевые искусства мира происходят из Шаолиня, а мировые технологии создают основу. Мы можем идти в ногу с быстро меняющейся индустрией развлечений, только заложив прочный фундамент и поняв принципы.
Преимущества внешнего интерфейса
Лао Юань занимается бизнесом уже 8 лет. Несколько лет назад он попал в Baidu и Tencent по счастливой случайности. Позже он решил начать бизнес между предложением Али и предпринимательством, и, что еще более удачно, он получил ежемесячную зарплату в размере 30 тысяч + в возрасте 27 лет.
За последние 3 года я провел около 200 онлайн-уроков в Tencent Classroom. Я выбрал 50 из них и теперь бесплатно раздаю их студентам, которые хотят совершенствоваться. Если вам интересно, вы можете отсканировать код, чтобы получить их. бесплатно, в порядке живой очереди >>
Учитель Чжицзя автора
12 марта 2019 г.