这是我的index.html页面：
gather您可以看到其中包含很多内容，但是我正在做SPA应用程序，因此所有组件和页面都是通过特定的JS文件加载的。
我想避免用户在第一次加载时必须下载大量脚本，而是在需要的情况下加载所需的脚本（仅一次，以后使用缓存）。
这是一些平均组件结构，例如：
<!DOCTYPE html>
<html lang="en" ng-app="taxi4you-console" 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">
<meta name="description" content="Taxi4you Console Manager - TCM">
<meta name="author" content="Taxi4you LTD">
<title>{{title}}</title>
<!--favicon icon-->
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<!--google font-->
<link href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<!--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/weather-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/custom.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.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://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-sanitize.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='//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.rtl.js" ng-if="initSrc && $root.locale=='he-IL'"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js" ng-if="initSrc && $root.locale!='he-IL'"></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.rtl.js" ng-if="initSrc && $root.locale=='he-IL'"></script>
<script src="assets/js/scripts.js" ng-if="initSrc && $root.locale!='he-IL'"></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/list-suppliers/list-suppliers.js" charset="utf-8"></script>
<!-- suppliers screens -->
<script src="screens/suppliers/overview/overview.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 scripts -->
<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>
<!-- 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/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，但是我不知道如何将其与我的项目完全结合。