Я случайно заглянул сегодня на github и увидел файл с именемwebpack-virtual-modules, когда я зашел и посмотрел на него, я был потрясен его дизайном. Меня удивляет, что так еще можно играть. Затем я улучшил предыдущую модульную схему компиляции по запросу и нашел ее действительно крутой. Эта статья может быть первой статьей в Nuggets, которая популяризирует и практикует виртуальные модули webpack.Порекомендуйте друзьям взглянуть на этот проект (webpack-virtual-modules), может принести вам вдохновение и идеи~
адрес проекта на гитхабе:GitHub.com/Ли Сиии/ву…
виртуальные модули webpack:GitHub.com/sys gears/Возвышающийся…
требуют.контекст: Веб-пакет Это PE .org/guides/…
Некоторые люди могут спросить, почему это так хлопотно, почему бы не использовать метод динамического импорта напрямую?
Ответ: Это потому, что у него есть побочный эффект, он будет преобразован в обычное совпадение, и каталог будет просканирован заново. Мы можем только указать веб-пакету динамически сканировать каталог и преобразовать его в статически определенный каталог, чтобы он мог явно выполнять модульную компиляцию по требованию. webpack-virtual-modules делает именно это. Я считаю, что его присутствие слишком важно. Кстати, в webpack мы можем использовать DefinePlugin для динамического внедрения глобальных переменных. И webpack-virtual-modules может динамически внедрять файлы виртуальных модулей, что действительно удивительно. Это может решить проблему, вызванную динамическим импортом.
добро пожаловать друзьяНравится 👍👍👍Поддержка,перестань говорить глупости,Готовы к сыпучим товарам! ! ! ! ! !
Что такое модульность?
Модуль, как показано на рисунке (рекомендуется, чтобы друзья могли стандартизировать модуль по методу Feature-First)
Рекомендация Feature-First article:nuggets.capable/post/684490…
Преобразование проекта модульной компиляции по запросу vue
1: Прежде всего, нам нужно определить компилируемый модуль с наименьшей степенью детализации в соответствии со спецификацией, такой как каталог, определенный в папке src-modules, мы называем его компилируемым модулем. Это ключ к модульной компиляции.
2: Роль файла import-dynamic-modules.js:
- Получите скомпилированный модуль webpak-virtual-modules
- Динамически создавать модули: роутер, магазин
3: vue.config.js:
- Создайтемодуль webpak-virtual-modules (node_modules/vue-dynamic-modules.js)
Огромные выгоды от модульной компиляции!
Сравнивая фактические эффекты модульной компиляции по требованию, можно увидеть, что проблема медленной компиляции больше не существует.Независимо от того, сколько файлов модулей у вас есть в вашем проекте, на самом деле это порядок величины модуля. Количество модулей в нашей компании достигло более 60. Компиляция npm run serve составляет около 3850 файлов, а основные изменения происходят между 40-ми и 60-ми годами. Модульная схема компиляции может в основном обеспечить компиляцию между 13-м и 18-м. И это не повлияет на производительность компиляции из-за количества модулей проекта.
Нижеvue-dynamic-module-example Протестируйте компиляцию проекта:
npm run serve --module=bar время компиляции:2788ms
npm run serve serve Время компиляции:6268ms
Ниже приведена компиляция нашего реального проекта:
npm run serve --module=bar время компиляции:13s
npm run serve время компиляции:60s
Не знаю, нашли вы или нет, на самом деле виновником медленной компиляции является:npm run serveа такжеnpm run build. когда мы выполняемnpm запустить подачу иКогда npm run build, он полностью компилируется, полностью упаковывается и выпускается.В прошлом мы всегда считали, что должны оптимизировать конфигурацию веб-пакета, чтобы решить проблему медленной компиляции. На самом деле, мы можем рассмотреть вопрос о модуляризации. Потому что мы можем действительно найти источник низкой производительности компиляции только в том случае, если мы четко разграничим, что мы должны компилировать, а что нет.
Если вас все еще беспокоит медленная компиляция проекта, вы можете использовать этот метод для завершения, и изменения будут очень небольшими.
Если вы думаете, что это нормально, добро пожаловатьНравится 👍👍👍Поддержите, оставляйте комментарии.
Автор ждет возможности трудоустройства.Я нахожусь в Пекине, и я приветствую рекомендации.