Как увеличить скорость упаковки webpack на 50%?

внешний интерфейс JavaScript CSS Webpack

По мере увеличения количества модулей, включенных во внешнее приложение, время, затрачиваемое на упаковку кода, также увеличивается. Пакетирование многих проектов в компании занимает более 10 секунд, для обычных людей неудобно ждать более 10 секунд, хотя последующее пошаговое редактирование происходит очень быстро. Поэтому я хочу объединить реальную среду разработки, чтобы повысить скорость первой упаковки.

1. Фактическая среда разработки

У большинства сайтов, которые находятся на обслуживании, есть несколько особенностей:

  • Огромное количество модулей
  • Модули в основном делятся на модули js и модули css, и, наконец, используется меньший модуль.extract-text-webpack-pluginУпакуйте отдельный файл css
  • Файл входа веб-пакета содержит js и меньше, поэтому каждый пакет должен иметь дело с модулями js и меньше.
  • Многие требования включают только модификацию js-модулей, а не модификацию стиля. наоборот.

2. Идеи оптимизации

Поскольку во многих случаях компиляция модуля less не требуется, компиляция только модуля js может значительно повысить производительность webpack в этих случаях. Ведь компиляция less и извлечение css занимают очень много времени.

3. Шаги оптимизации

Оптимизация состоит из следующих двух шагов:

  • Различать цель компиляции, компилировать js отдельно или редактировать css отдельно? Или js+css?
  • Файл ввода разделяет js и css

3.1 Различение целей компиляции

Этот шаг относительно прост, нам нужно использоватьcross-envЭтот плагин, например, следующие две команды компиляции различают компиляцию js и компиляцию js+css.

{
	"scripts": {
	    "build:js": "cross-env ctarget=all webpack",
	    "biuld:js+css": "cross-env ctarget=js webpack"
  }
}

Таким образом, мы можем передать файл конфигурации webpackprocess.env.ctargetРазличать текущую цель компиляции.

3.2 Разделение js и css

Этот шаг должен быть реализован через загрузчик веб-пакета, который может использовать существующие колеса.string-replace-loader.

Этот загрузчик может изменять код на этапе компиляции и может использовать регулярные выражения для замены. Вы можете использовать его для загрузки файлов js, а затем удалить часть кода. Эффект следующего примера заключается в удалении всего импорта меньшего количества кода в файле js.

{
	module: {
		rules: [
			{
            test: /.js$/,
            use: (function(){
                var list = ['这里可以加上其他需要的loader']; 
                // 更具编译目标删除less的导入
                if (process.env.ctarget === 'js') {
                    list.push({
                        loader: 'string-replace-loader',
                        options: {
                            search: '^.+?require\\(.+(\\.less).+$',
                            replace: '',
                            flags: 'm'
                        }
                    })
                }
                return list;
            })()
        }
		]
	}
}

здесь используетсяstring-replace-loaderобязательно добавьflags: 'm', иначе многострочное сопоставление не может быть выполнено.

Если мы хотим упаковать css отдельно, мы можем написать иstring-replace-loaderЗагрузчик с обратным эффектом, сохраняет только часть стиля и удаляет другой код js.

4. Эффекты

После практического тестирования эта оптимизация может сэкономить 50% времени. Конечно, это зависит от соотношения количества модулей js и css к каждому проекту.

Категории