Это мой index.html - как вы можете, он имеет много внешних файлов CSS и JS.Интересно, есть ли способ исправить это.
См. Index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myapp" ng-controller="main" ng-cloak>
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>{{title}}</title>
<!--favicon icon-->
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<!--common style-->
<link href="assets/vendor/bootstrap/css/bootstrap.rtl.css" ng-if="$root.locale=='he-IL'" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.css" ng-if="$root.locale!='he-IL'" rel="stylesheet">
<link href="assets/vendor/lobicard/css/lobicard.css" rel="stylesheet">
<link href="assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<link href="assets/vendor/themify-icons/css/themify-icons.css" rel="stylesheet">
<link href="assets/vendor/wesather-icons/css/weather-icons.min.css" rel="stylesheet">
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<!--toastr-->
<link href="assets/vendor/toastr-master/toastr.css" rel="stylesheet">
<!--select2-->
<link href="assets/vendor/select2/css/select2.css" rel="stylesheet">
<link href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' rel='stylesheet' type='text/css' media='all' />
<!--custom css-->
<link href="assets/css/main.rtl.css" ng-if="$root.locale=='he-IL'" rel="stylesheet">
<link href="assets/css/main.css" ng-if="$root.locale!='he-IL'" rel="stylesheet">
<link href="assets/css/custom.rtl.css" ng-if="$root.locale=='he-IL'" rel="stylesheet">
<link href="assets/css/custom.css" ng-if="$root.locale!='he-IL'" rel="stylesheet">
<link href="assets/css/custom-both.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/vendor/html5shiv.js"></script>
<script src="assets/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body ng-show="initSrc" class="app header-fixed left-sidebar-fixed right-sidebar-fixed right-sidebar-overlay right-sidebar-hidden">
<app></app>
<!-- assets scripts -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular-route.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.7.2/angular-sanitize.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-animate.min.js" charset="utf-8"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js' type='text/javascript'></script>
<script src="assets/vendor/popper.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/vendor/jquery-ui-touch/jquery.ui.touch-punch-improved.js"></script>
<script class="include" type="text/javascript" src="assets/vendor/jquery.dcjqaccordion.2.7.js"></script>
<script src="assets/vendor/lobicard/js/lobicard.js"></script>
<script src="assets/vendor/jquery.scrollTo.min.js"></script>
<script src="assets/vendor/date-picker/js/bootstrap-datepicker.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="assets/vendor/select2/js/select2.min.js"></script>
<!--toastr-->
<script src="assets/vendor/toastr-master/toastr.js"></script>
<!--[if lt IE 9]>
<script src="assets/vendor/modernizr.js"></script>
<![endif]-->
<!-- app scripts -->
<script src="app/app.js" charset="utf-8"></script>
<script src="app/run.js" charset="utf-8"></script>
<script src="app/main.js" charset="utf-8"></script>
<!-- app services -->
<script src="app/services/helpers/modules-service.js" charset="utf-8"></script>
<script src="app/services/helpers/defaults-service.js" charset="utf-8"></script>
<script src="app/services/helpers/query-string-service.js" charset="utf-8"></script>
<script src="app/services/helpers/object-manipulation-service.js" charset="utf-8"></script>
<script src="app/services/helpers/array-manipulation-service.js" charset="utf-8"></script>
<script src="app/services/helpers/auto-redirect-service.js" charset="utf-8"></script>
<script src="app/services/init-service.js" charset="utf-8"></script>
<script src="app/services/http-service.js" charset="utf-8"></script>
<script src="app/services/filter-service.js" charset="utf-8"></script>
<script src="app/services/cast-service.js" charset="utf-8"></script>
<script src="app/services/socket-service.js" charset="utf-8"></script>
<script src="app/services/local-storage-service.js" charset="utf-8"></script>
<script src="app/services/authentication-service.js" charset="utf-8"></script>
<script src="app/services/parse-service.js" charset="utf-8"></script>
<script src="app/services/translation-service.js" charset="utf-8"></script>
<script src="app/services/toast-service.js" charset="utf-8"></script>
<script src="app/services/confirmation-modal-service.js" charset="utf-8"></script>
<!-- shared screens -->
<script src="screens/shared/cardboards/users/users.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/users/components/list-users/list-users.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/users/components/create-user-modal/create-user-modal.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/users/components/attach-user-to-department-modal/attach-user-to-department-modal.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/users-detail/users-detail.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/users-detail/components/edit-user/edit-user.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/departments/departments.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/departments/components/list-departments/list-departments.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/departments/components/create-department-modal/create-department-modal.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/departments-detail/departments-detail.js" charset="utf-8"></script>
<script src="screens/shared/cardboards/departments-detail/components/edit-department/edit-department.js" charset="utf-8"></script>
<script src="screens/shared/settings/permissions/permissions.js" charset="utf-8"></script>
<script src="screens/shared/settings/permissions/components/permissions-table/permissions-table.js" charset="utf-8"></script>
<!-- root screens -->
<script src="screens/root/overview/overview.js" charset="utf-8"></script>
<script src="screens/root/cardboards/suppliers/suppliers.js" charset="utf-8"></script>
<script src="screens/root/cardboards/suppliers/components/create-suppliers-modal/create-suppliers-modal.js" charset="utf-8"></script>
<script src="screens/root/cardboards/suppliers/components/edit-supplier/edit-supplier.js" charset="utf-8"></script>
<script src="screens/root/cardboards/suppliers/components/list-suppliers/list-suppliers.js" charset="utf-8"></script>
<!-- suppliers screens -->
<script src="screens/suppliers/overview/overview.js" charset="utf-8"></script>
<script src="screens/suppliers/account/general-details/general-details.js" charset="utf-8"></script>
<script src="screens/suppliers/account/billing/billing.js" charset="utf-8"></script>
<script src="screens/suppliers/account/payment-methods/payment-methods.js" charset="utf-8"></script>
<!-- auth screens -->
<script src="screens/auth/login/login.js" charset="utf-8"></script>
<script src="screens/auth/login/components/request-sms/request-sms.js" charset="utf-8"></script>
<script src="screens/auth/login/components/reset-password/reset-password.js" charset="utf-8"></script>
<!-- shared components -->
<script src="shared/forms/services/selector-service.js" charset="utf-8"></script>
<script src="shared/forms/datepicker/datepicker.js" charset="utf-8"></script>
<script src="shared/forms/smart-select/smart-select.js" charset="utf-8"></script>
<script src="shared/forms/text-input/text-input.js" charset="utf-8"></script>
<script src="shared/forms/autocomplete/autocomplete.js" charset="utf-8"></script>
<script src="shared/forms/birthday-input/birthday-input.js" charset="utf-8"></script>
<script src="shared/filters/pagination/pagination.js" charset="utf-8"></script>
<script src="shared/filters/search-filter/search-filter.js" charset="utf-8"></script>
<script src="shared/filters/status-filter/status-filter.js" charset="utf-8"></script>
<script src="shared/filters/sort-filter/sort-filter.js" charset="utf-8"></script>
<script src="shared/filters/date-filter/date-filter.js" charset="utf-8"></script>
<script src="shared/general-errors/general-errors.js" charset="utf-8"></script>
<script src="shared/confirmation-modal/confirmation-modal.js" charset="utf-8"></script>
<script src="shared/status-badge/status-badge.js" charset="utf-8"></script>
<script src="shared/page-title/page-title.js" charset="utf-8"></script>
<script src="shared/page-title/services/breadcrumb-service.js" charset="utf-8"></script>
<script src="shared/list-header/list-header.js" charset="utf-8"></script>
<script src="shared/breadcrumbs/breadcrumbs.js" charset="utf-8"></script>
<script src="shared/loading-spinner/loading-spinner.js" charset="utf-8"></script>
<script src="shared/alert-bar/alert-bar.js" charset="utf-8"></script>
<script src="shared/no-content-placeholder/no-content-placeholder.js" charset="utf-8"></script>
<script src="shared/dropdown/dropdown.js" charset="utf-8"></script>
<!-- structure scripts -->
<script src="structure/header/header.js" charset="utf-8"></script>
<script src="structure/header/components/save-button/save-button.js" charset="utf-8"></script>
<script src="structure/header/components/profile-menu/profile-menu.js" charset="utf-8"></script>
<script src="structure/footer/footer.js" charset="utf-8"></script>
<script src="structure/sidebar/sidebar.js" charset="utf-8"></script>
<script src="structure/sidebar/services/path-service.js" charset="utf-8"></script>
<script src="structure/sidebar/services/menu-service.js" charset="utf-8"></script>
<script src="structure/sidebar/services/root-menu-exporter.js" charset="utf-8"></script>
<script src="structure/sidebar/services/supplier-menu-exporter.js" charset="utf-8"></script>
<script src="structure/aside/aside.js" charset="utf-8"></script>
<!-- analytical scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js" charset="utf-8"></script>
</body>
</html>
Я попытался обернуть проект с помощью Webpack и создать один файл комплекта для этих внешних JSкоды.Однако я не считаю такой способ работы настолько эффективным - я все же позволяю своим пользователям загружать компоненты, контроллеры и службы всего проекта при начальной загрузке, что, безусловно, не является правильным способом сделать это.
В старой веб-разработке вы должны включать только необходимые структурные внешние js и css и конкретные файлы, которые требуются для одной и той же страницы.
Поскольку это приложение SPA, как это должно быть сделано?
И у меня есть еще один крошечный вопрос об инъекциях сервисов AngularJS.
Чтобы использовать службу в контроллере, я должен сначала внедрить ее.
Но я все равно должен загрузить ее файл js в index.html и запросить его данные с удаленного сервера.- даже когда я не внедряю и не использую его в каком-либо контроллере.
Так что, если я все равно обрабатываю службу, почему я должен внедрить ее или, может быть, почему инъекция не включает асинхронный запрос файлакод