Блог

Я использую Webpack довольно простым и понятным способом, который объединяет несколько файлов JS и TS в один пакет, и он хорошо работает на моем сайте.

Тем не менее, я хочу разделить текущий пакет на более мелкие пакеты, так как я получаю предупреждение при сборке пакета из-за его размера, и я получаю предупреждения, запускающие аудит Lighthouse в браузере, о том, что я должен уменьшить размер файла моего bundle.js досье.

Самое простое решение, на мой взгляд, состоит в том, чтобы разделить мой текущий пакет на 4 части, т. е. bundle1.min.js , bundle2.min.js , и т.д… Затем я просто последовательно обслуживаю пакеты.

Проблема в том, что разделение и обслуживание моего пакета таким образом нарушает другие JS на моей странице. Например, функция, определенная в bundle1 и вызываемая в другом файле JS, больше не работает, если я не удалю все остальные bundle.js файлы. Кажется, что работает только самый последний загруженный файл пакета.

Есть ли лучший подход для получения пакетов меньшего размера и обеспечения правильной работы всех пакетов?

Разделение кода на основе маршрутов довольно популярно, потому что на каждой странице / маршруте обычно есть небольшое подмножество компонентов.

Руководство можно найти здесь (для реакции)

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