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

Question

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

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

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

Answer 1

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

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

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