Разделить vendor.js на несколько частей

Question

Я работаю над проектом Angular 5 с угловым кли. Я использовал некоторые модули npm при разработке сайта. Когда я создаю производственную сборку, она генерирует vendor.js с размером в МБ, поэтому сайт загружается очень медленно, когда пользователь открывает его в первый раз.

Я попытался добавить несколько дополнительных аргументов при сборке ng build --prod --aot --buildOptimizer, но все же его размер довольно велик по сравнению с другими файлами.

Есть ли какой-нибудь способ в веб-пакете, которым я могу разделить vendor.js на несколько файлов, уменьшить размер файла или лениво загрузить файлы vendor.js?

Answer 1

Да. В веб-пакете 4 вы можете сделать это, используя splitChunks конфигурацию и SplitChunksPlugin , в то время как в более низких версиях вы можете использовать AggressiveSplittingPlugin . Хотя эти изменения сами по себе мало помогают, так как общий размер остается неизменным.

Лучше lazy-load некоторых библиотек. Для этого вы можете динамически импортировать библиотеки (или модули / файлы, которые их используют) вместо операторов импорта, но, поскольку это асинхронное действие, потребуется переписать логику кода. Поскольку вы используете angular, может быть проще использовать framework-специфичный lazy-loading

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