Я реорганизую приложение Angularjs, чтобы оно стало приложением React. Приложение Angular содержало целую кучу тегов скриптов в index.html, например:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/lodash/dist/lodash.min.js"></script>
<script src="bower_components/Chart.js/Chart.min.js"></script>
<script src="bower_components/pdfmake/build/pdfmake.min.js"></script>
<script src="bower_components/pdfmake/build/vfs_fonts.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="bower_components/angular-touch/angular-touch.min.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
<script src='bower_components/angular-loading-bar/build/loading-bar.min.js'></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.min.js"></script>
<script src="bower_components/sweetalert/dist/sweetalert-dev.js"></script>
<script src="bower_components/store/dist/store2.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
(...)
При переносе этого в веб-пакет я удалил эти теги сценария и заменил их импортом в файле ввода index.js, который выглядит следующим образом:
// dependencies from angular legacy
import '../node_modules/jquery/dist/jquery.min.js';
import '../node_modules/lodash/lodash.min.js';
import '../node_modules/Chart.js/dist/Chart.min.js';
import '../node_modules/pdfmake/build/pdfmake.min.js';
import '../node_modules/pdfmake/build/vfs_fonts.js';
import '../node_modules/angular/angular.min.js';
import '../node_modules/angular-animate/angular-animate.min.js';
import '../node_modules/angular-aria/angular-aria.min.js';
import '../node_modules/angular-cookies/angular-cookies.min.js';
import '../node_modules/angular-messages/angular-messages.min.js';
import '../node_modules/angular-resource/angular-resource.min.js';
import '../node_modules/angular-route/angular-route.min.js';
import '../node_modules/angular-sanitize/angular-sanitize.min.js';
import '../node_modules/angular-strap/dist/angular-strap.min.js';
import '../node_modules/angular-strap/dist/angular-strap.tpl.min.js';
import '../node_modules/angular-touch/angular-touch.min.js';
import '../node_modules/angular-chart.js/dist/angular-chart.min.js';
import '../node_modules/angular-loading-bar/build/loading-bar.min.js';
import '../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js';
import '../node_modules/sweetalert/dist/sweetalert-dev.js';
import '../node_modules/store2/dist/store2.min.js';
import '../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js';
import '../node_modules/angular-strap/dist/angular-strap.min.js';
import '../node_modules/angular-strap/dist/angular-strap.tpl.min.js';
import '../node_modules/angular-ui-router/release/angular-ui-router.min.js';
import '../node_modules/ui-select/dist/select.min.js';
(...)
Что я заметил, так это то, что пакет webpack очень большой, в 26 МБ. Когда я загружаю новую страницу, которую я имею, Chrome Dev Tools говорит мне, что «Передано» составляет 7,7 МБ, а «Ресурсы» - как 27 МБ.
Кроме того, теперь с этими импортами у меня есть несколько версий Angular в моих node_modules.
Я использовал webpack-bundle-analyzer и получил следующее:
Итак, несколько вопросов:
на этой фотографии, почему у меня есть angular.js и angular.min.js? В моем импорте у меня только import '../node_modules/angular/angular.min.js';
Что означает разница между переданным ресурсом и ресурсами в этом примере?