Как минимизировать веб-приложение Angular 4
Я создаю веб-приложение с Angular 4 и angular/cli: 1.3.1node: 10.7.0
Какой плагин я могу использовать для минимизации моего приложения, потому что размер файла vendor.bundle составляет около 8 МБ. Я реализовал ленивую загрузку в приложении.
Я создаю приложение от Jenkins с помощью: npm run build --prod --aot true --progress false
Если кто-то знает какой-нибудь плагин или у него есть туториалы, это будет здорово!
Заранее спасибо.
@MartinPaucot я использую эту команду npm run build --prod --aot true --progress false. Я попробую с вашей командой.
@MartinPaucot без изменений. Файлы имеют одинаковый размер.
Это довольно широкий вопрос, поскольку, не видя таких вещей, как ваш angular.json, package.json, tsconfig.ts, как работают ваши пакеты и т. д., трудно определить, что вам не хватает. Однако в angular.json -> configurations -> production убедитесь, чтоOptimizer: true, sourceMap: false, buildOptimizer:true, extractCss:true, vendorChunk:true и просто запустите ng build --prod в большинстве случаев, если ваш CLI настроен правильно.
@MartinPaucot ваша команда действительна только для проекта Angular 6+. Так что это не лучший ответ на этот вопрос.
Кроме того, такие вещи, как Webpack Bundle Analyzer, удобно использовать время от времени, чтобы увидеть, хорошо ли вы «трясете дерево».
Ответы 3
Как правило, следует использовать соответствующий параметр CLI. В случае производственной сборки это будет
ng build --prod
В производственных сборках Angular файлы минимизированы и урезаны.
Вы также спрашивали о некоторых руководствах, поэтому я добавляю еще кое-что для чтения:
https://angular.io/guide/развертывание
https://medium.com/@kavisha.talsania/angular-development-vs-production-build-671b7fd5dbf4
код команды сборки оптимизирован. Проблема в размере файлов.
в моем случае я использую эти команды
ng build --prod --aot --build-optimizer --vendor-chunk --source-map=false
проверено ранее, проблема не связана с тем, как использовать команду для сборки
Часть проблемы решилась. Решение? Ранее мы делали сборку из jenkins с помощью «npm run build --prod --aot true --progress false», и по какой-то причине с этой командой файл поставщика назывался vendor.bundle.js и имел размер o 8,3 МБ. Теперь я изменил эту команду на «ng build --prod --aot true --progress false», и файл поставщика был назван vendor.fdd67abb220f03081b41.bundle.js и имел размер o 2,3 МБ.
Кто-нибудь знает, почему у нового вендора в названии стоит решетка?
Это производственная сборка? (
ng build --configuration=production)