Оптимизация webpack в CI

Чтобы избежать этого, можно настроить кэш. Но в статье мы хотим рассмотреть другой способ решения этой задачи.

Существуют определённые условия, при которых сборка ресурсов не является обязательной. Например, если в приложении нет функциональных тестов на JavaScript (например, с помощью Panther, Cypress или Playwright).

В таком случае зачем тратить время на компиляцию артефактов, которые не используются? Во-первых, потому что приложение не сможет запуститься, если файл entrypoints.json не существует:

An exception has been thrown during the rendering of a template ("Could not find the entrypoints file from Webpack: the file "/var/www/public/build/entrypoints.json" does not exist.")

Но что это за файл и каково его назначение? Этот файл генерируется webpack'ом, чтобы Symfony знала, где компилируются файлы, которые нужно включить из точки входа. Например, если в приложении есть точка входа app, то файл будет выглядеть следующим образом:

{
  "entrypoints": {
    "app": {
      "js": [
        "/build/runtime.js",
        "/build/0.js",
        "/build/vendors~app.js",
        "/build/app.js"
      ],
      "css": [
        "/build/vendors~app.css",
        "/build/app.css"
      ]
    }
  }
}

Чтобы обойти эту проблему, отключим все плагины webpack, не являющиеся необходимыми для компиляции ресурсов. Для этого добавьте следующие строки в конец файла webpack.config.js,

const AssetsPlugin = require('assets-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

if (process.env.WEBPACK_DUMP_CONFIG) {
    config.module = {};
    config.plugins = config.plugins.filter((plugin) => (plugin instanceof AssetsPlugin || plugin instanceof ManifestPlugin));
}

// Эта строка уже существует в конфигурации по умолчанию
module.exports = config;

Наконец, в CI можно скомпилировать ресурсы с помощью следующей команды:

WEBPACK_DUMP_CONFIG=1 yarn encore dev || true

Вот и всё 🎉 Благодаря этому хаку мы смогли сэкономить более двух минут на каждой сборке! Разработчики теперь быстрее получают обратную связь, расходы на CI сокращаются, а мы экономим электроэнергию. Эти 4 маленькие строки внедряются очень быстро, так зачем себя ограничивать?

Вам наверняка интересно, как это работает. Отключив все ненужные плагины, webpack всё равно переместит ресурсы и сгенерирует файл public/build/entrypoints.json.