Ленивая загрузка JS, CSS-файлов поставщика с помощью Webpack

#javascript #performance #webpack #lazy-loading

Вопрос:

Я хочу повысить производительность своего веб-сайта на основе основных веб-показателей. Ниже приведены некоторые сведения о настройке моего проекта Приложение Webpack 4.43.0 основано на .NET

Мой файл JS поставщика составляет ~ 450 КБ после минимизации. Основные CSS-файлы ~ 400 КБ после минимизации.

Я попробовал несколько изменений в «webpack.config.js» разделить файлы поставщиков на куски в зависимости от размера, но лениво загружать файлы на основе страниц-это то, чего я не смог достичь. Без этого не было бы никакого улучшения производительности.

Например, если домашней странице нужен только модуль поставщика A, B и C. Как динамически загружать блоки, содержащие эти модули? Если есть лучший способ, пожалуйста, поделитесь им.

Я просмотрел документацию по переполнению стека, но не смог найти соответствующего ответа. Пожалуйста, предоставьте подробную информацию о коде webpack.config.js так что я могу понять.

Также прочитайте, что некоторые новые функции доступны в Webpack > >4.6.x или 5.x.x. При необходимости я также могу обновить веб-пакет.

Спасибо