предисловие
За последние два дня мне было нечего делать.Я хотел оптимизировать время запуска проекта.На оптимизацию времени запуска проекта с 48 секунд до 14 секунд ушло полдня,то есть около 70 секунд.Эффект такой все еще там, и используется только одна строка кода.
👇Я расскажу о процессе поиска этой строчки кода.Если вам не терпится, вы можете сразу перейти к концу статьи и прочитать заключение.
Предыстория проекта
Это простой проект Vue, но внутри компанииvue-cliОн покрыт слоем, но это не имеет большого значения.
Нет ничего другого, обычная веб-страница H5 не использует много плагинов, чтобы контролировать объем проекта.
Анализ проекта
Теперь, когда вы решили оптимизировать, вы должны сначала проанализировать проект и использоватьspeed-measure-webpack-pluginа такжеwebpack-bundle-analyzerКонкретную конфигурацию после разбора описывать здесь не буду.Это очень просто.Надолго поискав в интернете,прямо посмотрю вывод сюда.
Во-первых, это время выполнения проекта:
Можно видеть, что в основном трудоемкая специальностьeslint-loaderа такжеvue-loaderТеперь один из них занимает более 40 секунд, а другой — более 30 секунд, что очень ресурсоемко.
Далее давайте взглянем на анализ конкретного пакета👇
Это может быстро найти корень проблемы. Вам не нужно смотреть на поставщиков чанков справа. Просто посмотрите на страницу чанков слева. Слишком много страниц и соответствующих файлов.eslint-loaderа такжеvue-loaderЭто заняло много времени, с таким количеством файлов, что нужно было долго проверять один за другим.
Правая сторона может быть оптимизирована, но в этом нет необходимости.swiperНе очень большой.
Итак, теперь вы можете точно локализовать проблему, потому что проект представляет собой мульти-SPA-приложение, в результате чего.vueЕсть много файлов, которые выполняются при старте проектаeslintПроверка и загрузка заняли слишком много времени, что привело к увеличению времени запуска проекта.
решение
После обнаружения проблемы, вы должны решить проблему. Есть два предварительных решения:
- убийство
eslint, что не проверяется при компиляции нативно - тайник
Решение 1 обязательно самое простое, но на самом деле оно немного неразумно, открытоeslintЭто должно стандартизировать формат кода.Хотя существуют соответствующие крючки для форматирования кода при отправке кода, подсказки в процессе разработки могут лучше помочь нам сформировать разумный метод кодирования.
Так что теперь остается единственное решение — выполнять операции кеширования, а потом я начну искать соответствующие плагины для лучшего кеширования.
попробуй решить
Первый — это hard-source-webpack-plugin.Этот плагин обеспечивает промежуточный этап кеширования модулей, но проект приходится запускать дважды.В первый раз время сборки обычное, а второй раз может сэкономить около 90% времени.
Этот плагин рекомендуется во многих статьях, он очень хорош и очень прост в использовании, просто 👇:
plugins: [
new HardSourceWebpackPlugin()
]
Вот и все.
Это так просто? Это действительно так просто, но это не так просто Если мы остановимся здесь, я не буду метаться весь день.
Это так просто установить:
npm i hard-source-webpack-plugin -D
Затем простая конфигурация, например 👆, затем перезапустите проект, угадайте, что?
У меня есть ошибка!
какова причина?
Это из-за одного из плагинов для измерения скорости webpack или webpack-bundle-analyzer, почему?
Автору на самом деле не очень ясна причина, потому что ошибка, сообщаемая при запуске, выглядит следующим образом:
Cannot find module 'webpack/lib/DependenciesBlockVariable'
Ого, эта ошибка немного случайна, почему вдруг сообщаетсяwebpackчто случилось?
Автор тоже озадачен, и никто не сталкивался с такой проблемой при переходе в гугл.
В крайнем случае, я могу только зайти на github hard-source-webpack-plugin, чтобы увидеть проблему, и обнаружить, что некоторые люди действительно сталкиваются с этой проблемой, и их решение состоит в том, чтобы уменьшитьwebpackверсия, но автор не может сделать это здесь, потому что она интегрирована вvue-cliКроме того, это еще прослойка внутри компании, которая делает невозможным понижение версии.
первый оборот
Так что еще можно сделать?
Другого пути действительно нет.Автор пытался искать релевантное содержимое DependenciesBlockVariable.В этот раз произошло тонкое изменение.Оказывается, что эта функция находится вwebpack5был удален в компании, это из-за внутреннихvue-cliВы используете версию webpack5.x?
Автор сразу нашел плагин в node_modules, а потом проверил файл package.json, и с разочарованием обнаружил, что версия вебпака 4.2.6, это уже отчаяние, неужели это невозможно?
Теперь, когда документация по веб-пакету открыта, внимательно изучите ее. Честно говоря, автор читал этот документ N раз, и каждый раз, когда я его читаю, возникают небольшие сюрпризы, а функций действительно слишком много.
Я полистал и увидел вот такую маленькую функцию👇:
О, это действительно небольшой сюрприз, эта функция проста, разве это не то, что я хочу? Затем примите быстрое решение и перейдите на vue.config.js, знаете что?
Готово!
Хотя документация для вебпака 5.0, автор обнаружил, что эта функция есть и в версии 4.x, если она слабее, то ее можно использовать.
После перезапуска проекта несколько раз я обнаружил, что время запуска стабилизировалось, и эффект действительно хороший~
Прямо мне дал 14 секунд, хотя немного нестабильно, это лучшее решение для текущего состояния.
Итак, окончательный код:
chainWebpack: (config) => {
config.cache(true)
}
использоватьchainWebpackПричина в том, что в проекте нет самостоятельного файла webpack.config.js, поэтому его можно разместить только в файле vue.config.js, используяchainWebpackчтобы вставить конфигурацию в webpack.
Как вы думаете, это здесь? слишком легко.
второй ход
После решения проблемы, конечно же, удалите два плагина speed-measure-webpack-plugin и webpack-bundle-analyzer, затем организуйте код и подтолкните его до конца.
Но автор все равно не сдается, почему не работает hard-source-webpack-plugin? Нет, почему это могут использовать другие, но не ваш собственный проект?
Чтобы снова работать и лучше оптимизировать время запуска проекта, я снова установил плагин hard-source-webpack-plugin и настроил его:
chainWebpack: (config) => {
config.plugin('cache').use(HardSourceWebpackPlugin)
}
На этот раз еще один забег, угадайте что?
Готово!
Во избежание невозможности повторного запуска автор в этот раз не использовал два плагина speed-measure-webpack-plugin и webpack-bundle-analyzer, поэтому детально оценить время запуска невозможно, но визуальное время находится в пределах 10 секунды, что сильно.
Таким образом, причина, по которой hard-source-webpack-plugin, вероятно, является причиной сбоя этих двух потерь виджета статистики, была предпринята еще одна попытка, иначе GG неясен.
В заключение
Вывод тут очень простой, есть две версии.
Во-первых, если в проекте можно использовать hard-source-webpack-plugin, это очень удобно, и это делается, и ничего делать не надо, поэтому вот такая строчка кода 👇:
config.plugin('cache').use(HardSourceWebpackPlugin)
Это, вероятно, более чем на 90% быстрее, и официальное время не было ложным.
Во-вторых, если вы не можете использовать hard-source-webpack-plugin, то бросьте его и попробуйте тот, который идет в комплекте с webpack.cacheФункция тоже хороша, хотя она и не так хороша, как hard-source-webpack-plugin, она может сократить время запуска примерно на 70%, поэтому эта строка кода 👇:
config.cache(true)
И не нужно устанавливать никаких плагинов, в один шаг.
Эти два метода на самом деле осуществимы.С точки зрения стабильности и эффективности, hard-source-webpack-plugin все же лучше, ноcacheПреимущество в том, что вам не нужно устанавливать дополнительные плагины для веб-пакетов, вы сами решаете, что использовать.
На самом деле, здесь все еще есть дыра: по какой конкретной причине нельзя использовать hard-source-webpack-plugin? Автор просто догадался, что это связано с двумя плагинами speed-measure-webpack-plugin и webpack-bundle-analyzer, но я не уверен.Если кто-то из читателей знает, пожалуйста, оставьте сообщение в области комментариев или личное сообщение автору .
После такого долгого просмотра это тяжелая работа!
〈（_ _）〉
PS: Автор также использует рядJavaScriptЕсли вам интересно, вы можете нажать на личную домашнюю страницу, чтобы увидеть статью, и разместить два каталога:
Вот разбивка по датам👇
Вопросы по передним кистям - справочник (классификация дат)
Вот категории по темам 👇
Вопросы по интерфейсной кисти - справочник (категория вопросов)