From 40ab4243b81b471cdd9ba805d3c62b88728da419 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 22 Dec 2021 10:37:43 +0100
Subject: [PATCH] Split code into more bandwidth-friendly chunks

---
 client/src/components/AddContentButton.vue    |  2 +-
 client/src/components/AddContentElement.vue   |  2 +-
 client/src/components/AddWidget.vue           |  2 +-
 client/src/components/BackLink.vue            |  3 +-
 client/src/components/ColorChooser.vue        |  2 +-
 client/src/components/ContentBlock.vue        |  2 +-
 .../src/components/FullscreenInfographic.vue  |  4 +-
 client/src/components/HeaderBar.vue           |  5 ++-
 client/src/components/HelpfulTooltip.vue      |  2 +-
 client/src/components/LoadingButton.vue       |  2 +-
 client/src/components/MobileHeader.vue        |  5 ++-
 client/src/components/Modal.vue               |  2 +-
 client/src/components/MoreOptionsWidget.vue   |  3 +-
 client/src/components/ScrollUp.vue            |  2 +-
 .../components/StudentSubmissionDocument.vue  |  2 +-
 .../book-navigation/ContentNavigation.vue     |  3 +-
 .../book-navigation/NavigationSidebar.vue     |  3 +-
 .../book-navigation/SubNavigationItem.vue     |  4 +-
 .../content-block-form/ContentsForm.vue       | 21 +++++-----
 .../content-blocks/ContentComponent.vue       | 40 +++++++++----------
 .../content-blocks/DocumentBlock.vue          |  4 +-
 .../components/content-blocks/Instruction.vue |  2 +-
 .../components/content-blocks/LinkBlock.vue   |  2 +-
 .../content-blocks/assignment/Assignment.vue  |  6 +--
 .../assignment/FinalSubmission.vue            |  5 ++-
 .../assignment/SubmissionForm.vue             |  9 +++--
 .../assignment/SubmissionInput.vue            |  4 +-
 .../content-forms/AssignmentForm.vue          |  2 +-
 .../ContentBlockElementChooserWidget.vue      | 12 +++---
 .../components/content-forms/DocumentForm.vue |  4 +-
 .../components/content-forms/VideoForm.vue    |  2 +-
 .../components/instruments/FilterEntry.vue    |  2 +-
 .../components/instruments/FilterGroup.vue    |  2 +-
 .../src/components/notes/BookmarkActions.vue  |  8 ++--
 .../objective-groups/ObjectiveForm.vue        |  2 +-
 .../components/portfolio/AddProjectEntry.vue  |  2 +-
 .../portfolio/PortfolioOnboarding.vue         |  2 +-
 .../components/portfolio/ProjectActions.vue   |  2 +-
 .../src/components/portfolio/ProjectEntry.vue |  2 +-
 .../components/portfolio/ProjectEntryForm.vue |  9 +++--
 client/src/components/portfolio/ShareLink.vue |  2 +-
 .../src/components/profile/ActivityEntry.vue  |  2 +-
 client/src/components/profile/Avatar.vue      |  6 +--
 .../components/profile/ContentBookmark.vue    |  2 +-
 .../src/components/profile/EditGroupName.vue  |  2 +-
 client/src/components/profile/Profile.vue     |  2 +-
 .../src/components/profile/ProfileSidebar.vue |  2 +-
 .../components/rooms/AddRoomEntryButton.vue   |  2 +-
 .../src/components/rooms/EntryCountWidget.vue |  2 +-
 client/src/components/rooms/MoreActions.vue   |  2 +-
 .../src/components/rooms/RoomGroupWidget.vue  |  2 +-
 .../components/rooms/RoomVisibilityWidget.vue |  4 +-
 .../src/components/rooms/RoomsOnboarding.vue  |  2 +-
 .../school-class/ClassSelectionWidget.vue     |  4 +-
 client/src/components/ui/BaseInput.vue        |  4 +-
 .../components/ui/ButtonWithIconAndText.vue   |  4 +-
 client/src/components/ui/PopoverLink.vue      |  6 +--
 .../components/ui/file-upload/FileUpload.vue  |  4 +-
 .../ui/file-upload/SimpleFileUpload.vue       |  8 ++--
 .../ui/file-upload/SimpleFileUploadIcon.vue   |  2 +-
 .../file-upload/SimpleFileUploadWithIcon.vue  |  6 +--
 .../visibility/VisibilityAction.vue           |  6 +--
 client/src/helpers/uploadcare.js              | 37 ++++++++---------
 client/src/layouts/DefaultFooter.vue          |  4 +-
 client/src/layouts/FullScreenLayout.vue       |  2 +-
 client/src/layouts/PublicLayout.vue           |  2 +-
 client/src/layouts/SimpleLayout.vue           |  2 +-
 client/src/layouts/SplitLayout.vue            |  8 ++--
 client/src/pages/article.vue                  | 12 +++---
 client/src/pages/hello.vue                    |  8 ++--
 client/src/pages/instrument.vue               |  2 +-
 client/src/pages/module/moduleVisibility.vue  |  4 +-
 client/src/pages/onboarding/start.vue         |  4 +-
 client/src/pages/portfolio/project.vue        |  2 +-
 client/src/pages/start-old.vue                |  7 ++--
 client/src/pages/start.vue                    |  8 ++--
 client/src/pages/survey.vue                   |  2 +-
 client/src/pages/topic.vue                    |  4 +-
 client/src/router/auth.routes.js              |  8 ++--
 client/src/router/index.js                    | 15 ++++---
 client/src/router/me.routes.js                | 22 +++++-----
 client/src/router/module.routes.js            | 14 +++----
 client/src/router/onboarding.routes.js        | 10 ++---
 client/src/router/portfolio.routes.js         |  8 ++--
 client/src/router/room.routes.js              | 10 ++---
 85 files changed, 240 insertions(+), 225 deletions(-)

diff --git a/client/src/components/AddContentButton.vue b/client/src/components/AddContentButton.vue
index 4a0bd85a..76196426 100644
--- a/client/src/components/AddContentButton.vue
+++ b/client/src/components/AddContentButton.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-  import AddPointer from '@/components/icons/AddPointer';
+  const AddPointer = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddPointer');
 
   export default {
     props: ['after', 'parent'],
diff --git a/client/src/components/AddContentElement.vue b/client/src/components/AddContentElement.vue
index 5e763cf1..0c0173a3 100644
--- a/client/src/components/AddContentElement.vue
+++ b/client/src/components/AddContentElement.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-  import AddIcon from '@/components/icons/AddIcon';
+  const AddIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon');
 
   export default {
     props: ['index'],
diff --git a/client/src/components/AddWidget.vue b/client/src/components/AddWidget.vue
index b7508684..6beb58ab 100644
--- a/client/src/components/AddWidget.vue
+++ b/client/src/components/AddWidget.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-  import AddIcon from '@/components/icons/AddIcon.vue';
+  const AddIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon.vue');
 
   export default {
     props: {
diff --git a/client/src/components/BackLink.vue b/client/src/components/BackLink.vue
index c8d53130..d2dc3d4f 100644
--- a/client/src/components/BackLink.vue
+++ b/client/src/components/BackLink.vue
@@ -8,11 +8,12 @@
 </template>
 
 <script>
-  import ChevronLeft from '@/components/icons/ChevronLeft';
   import {MODULE_PAGE} from '@/router/module.names';
   import {ROOMS_PAGE} from '@/router/room.names';
   import {PROJECTS_PAGE} from '@/router/portfolio.names';
 
+  const ChevronLeft = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft');
+
   export default {
     props: {
       title: {
diff --git a/client/src/components/ColorChooser.vue b/client/src/components/ColorChooser.vue
index bdf0aa8a..a65bf882 100644
--- a/client/src/components/ColorChooser.vue
+++ b/client/src/components/ColorChooser.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-  import Tick from '@/components/icons/Tick';
+  const Tick = () => import(/* webpackChunkName: "icons" */'@/components/icons/Tick');
 
   export default {
     props: ['selected-color'],
diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 45eb6f63..6791a52d 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -65,7 +65,6 @@
   import MoreOptionsWidget from '@/components/MoreOptionsWidget';
   import UserWidget from '@/components/UserWidget';
   import VisibilityAction from '@/components/visibility/VisibilityAction';
-  import ContentComponent from '@/components/content-blocks/ContentComponent';
 
   import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
   import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
@@ -76,6 +75,7 @@
   import {hidden} from '@/helpers/visibility';
   import {CONTENT_TYPE} from '@/consts/types';
   import PopoverLink from '@/components/ui/PopoverLink';
+  const ContentComponent = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent');
 
   const instruments = {
     base_communication: 'Sprache & Kommunikation',
diff --git a/client/src/components/FullscreenInfographic.vue b/client/src/components/FullscreenInfographic.vue
index cdc678fc..6fa2fa6d 100644
--- a/client/src/components/FullscreenInfographic.vue
+++ b/client/src/components/FullscreenInfographic.vue
@@ -8,8 +8,8 @@
 
 <script>
   import Modal from '@/components/Modal';
-  import InfogramBlock from '@/components/content-blocks/InfogramBlock';
-  import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
+  const InfogramBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InfogramBlock');
+  const GeniallyBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/GeniallyBlock');
 
   export default {
     components: {
diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index a69d6cd0..c4ec7ec9 100644
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@@ -26,13 +26,14 @@
 <script>
   import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
   import UserWidget from '@/components/UserWidget.vue';
-  import Logo from '@/components/icons/Logo';
   import CurrentClass from '@/components/school-class/CurrentClass';
-  import Hamburger from '@/components/icons/Hamburger';
 
   import openSidebar from '@/mixins/open-sidebar';
   import me from '@/mixins/me';
 
+  const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
+  const Hamburger = () => import(/* webpackChunkName: "icons" */'@/components/icons/Hamburger');
+
   export default {
     mixins: [openSidebar, me],
 
diff --git a/client/src/components/HelpfulTooltip.vue b/client/src/components/HelpfulTooltip.vue
index c5aff061..b570f906 100644
--- a/client/src/components/HelpfulTooltip.vue
+++ b/client/src/components/HelpfulTooltip.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-  import InfoIcon from '@/components/icons/InfoIcon';
+  const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');
 
   export default {
     props: ['text'],
diff --git a/client/src/components/LoadingButton.vue b/client/src/components/LoadingButton.vue
index 6f164586..c94689dd 100644
--- a/client/src/components/LoadingButton.vue
+++ b/client/src/components/LoadingButton.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-  import LoadingIcon from '@/components/icons/LoadingIcon';
+  const LoadingIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/LoadingIcon');
 
   export default {
     props: {
diff --git a/client/src/components/MobileHeader.vue b/client/src/components/MobileHeader.vue
index 429a3ad9..e110a9a3 100644
--- a/client/src/components/MobileHeader.vue
+++ b/client/src/components/MobileHeader.vue
@@ -17,13 +17,14 @@
 </template>
 
 <script>
-  import Logo from '@/components/icons/Logo';
-  import Hamburger from '@/components/icons/Hamburger';
   import UserWidget from '@/components/UserWidget';
 
   import me from '@/mixins/me';
   import openSidebar from '@/mixins/open-sidebar';
 
+  const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
+  const Hamburger = () => import(/* webpackChunkName: "icons" */'@/components/icons/Hamburger');
+
   export default {
     mixins: [me, openSidebar],
 
diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue
index c6b4b78b..afdfcfba 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-  import Cross from '@/components/icons/Cross';
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
 
   export default {
     props: {
diff --git a/client/src/components/MoreOptionsWidget.vue b/client/src/components/MoreOptionsWidget.vue
index 664fc647..31508760 100644
--- a/client/src/components/MoreOptionsWidget.vue
+++ b/client/src/components/MoreOptionsWidget.vue
@@ -17,7 +17,8 @@
 
 <script>
   import WidgetPopover from '@/components/ui/WidgetPopover';
-  import Ellipses from '@/components/icons/Ellipses.vue';
+
+  const Ellipses = () => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses.vue');
 
   export default {
     components: {
diff --git a/client/src/components/ScrollUp.vue b/client/src/components/ScrollUp.vue
index 1f3d0c56..d09835b7 100644
--- a/client/src/components/ScrollUp.vue
+++ b/client/src/components/ScrollUp.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-  import ArrowUp from '@/components/icons/ArrowUp';
+  const ArrowUp = () => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowUp');
 
   export default {
     components: {
diff --git a/client/src/components/StudentSubmissionDocument.vue b/client/src/components/StudentSubmissionDocument.vue
index 94e7ef1e..7ded445a 100644
--- a/client/src/components/StudentSubmissionDocument.vue
+++ b/client/src/components/StudentSubmissionDocument.vue
@@ -10,8 +10,8 @@
 
 <script>
 
-  import DocumentIcon from '@/components/icons/DocumentIcon';
   import filenameFromUrl from '@/helpers/urls';
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
 
   export default {
     name: 'StudentSubmissionDocument',
diff --git a/client/src/components/book-navigation/ContentNavigation.vue b/client/src/components/book-navigation/ContentNavigation.vue
index c6c57590..d0ac0ad2 100644
--- a/client/src/components/book-navigation/ContentNavigation.vue
+++ b/client/src/components/book-navigation/ContentNavigation.vue
@@ -84,12 +84,13 @@
 </template>
 
 <script>
-  import Logo from '@/components/icons/Logo';
   import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
 
   import sidebarMixin from '@/mixins/sidebar';
   import meMixin from '@/mixins/me';
 
+  const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
+
   export default {
     props: {
       isSidebar: {
diff --git a/client/src/components/book-navigation/NavigationSidebar.vue b/client/src/components/book-navigation/NavigationSidebar.vue
index 08d56e2d..e8be5307 100644
--- a/client/src/components/book-navigation/NavigationSidebar.vue
+++ b/client/src/components/book-navigation/NavigationSidebar.vue
@@ -18,13 +18,14 @@
 </template>
 
 <script>
-  import Cross from '@/components/icons/Cross';
   import ContentNavigation from '@/components/book-navigation/ContentNavigation';
 
   import sidebarMixin from '@/mixins/sidebar';
 
   import {meQuery} from '@/graphql/queries';
 
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
+
   export default {
     mixins: [sidebarMixin],
 
diff --git a/client/src/components/book-navigation/SubNavigationItem.vue b/client/src/components/book-navigation/SubNavigationItem.vue
index 890e2442..fd7cb077 100644
--- a/client/src/components/book-navigation/SubNavigationItem.vue
+++ b/client/src/components/book-navigation/SubNavigationItem.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-  import ChevronDown from '@/components/icons/ChevronDown';
-  import ChevronUp from '@/components/icons/ChevronUp';
+  const ChevronDown = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronDown');
+  const ChevronUp = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronUp');
 
   export default {
     props: ['title'],
diff --git a/client/src/components/content-block-form/ContentsForm.vue b/client/src/components/content-block-form/ContentsForm.vue
index 0ca42929..d48ed0f2 100644
--- a/client/src/components/content-block-form/ContentsForm.vue
+++ b/client/src/components/content-block-form/ContentsForm.vue
@@ -84,17 +84,18 @@
 <script>
   import {meQuery} from '@/graphql/queries';
 
+  const ContentBlockElementChooserWidget = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/ContentBlockElementChooserWidget');
+  const ModalInput = () => import(/* webpackChunkName: "content-forms" */'@/components/ModalInput');
+  const AddContentElement = () => import(/* webpackChunkName: "content-forms" */'@/components/AddContentElement');
+  const LinkForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/LinkForm');
+  const VideoForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/VideoForm');
+  const ImageForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/ImageForm');
+  const DocumentForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/DocumentForm');
+  const AssignmentForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/AssignmentForm');
+  const TextForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/TextForm');
+
   const Modal = () => import('@/components/Modal');
-  const ContentBlockElementChooserWidget = () => import('@/components/content-forms/ContentBlockElementChooserWidget');
-  const ModalInput = () => import('@/components/ModalInput');
-  const AddContentElement = () => import('@/components/AddContentElement');
-  const LinkForm = () => import('@/components/content-forms/LinkForm');
-  const VideoForm = () => import('@/components/content-forms/VideoForm');
-  const ImageForm = () => import('@/components/content-forms/ImageForm');
-  const DocumentForm = () => import('@/components/content-forms/DocumentForm');
-  const AssignmentForm = () => import('@/components/content-forms/AssignmentForm');
-  const TextForm = () => import('@/components/content-forms/TextForm');
-  const TrashIcon = () => import('@/components/icons/TrashIcon');
+  const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
   const Checkbox = () => import('@/components/ui/Checkbox');
 
   export default {
diff --git a/client/src/components/content-blocks/ContentComponent.vue b/client/src/components/content-blocks/ContentComponent.vue
index e255f1b3..1c180b7f 100644
--- a/client/src/components/content-blocks/ContentComponent.vue
+++ b/client/src/components/content-blocks/ContentComponent.vue
@@ -21,28 +21,28 @@
 <script>
 import {mapState} from 'vuex';
 
-import TextBlock from '@/components/content-blocks/TextBlock';
-import InstrumentWidget from '@/components/content-blocks/InstrumentWidget';
-import ImageBlock from '@/components/content-blocks/ImageBlock';
-import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock';
-import VideoBlock from '@/components/content-blocks/VideoBlock';
-import LinkBlock from '@/components/content-blocks/LinkBlock';
-import DocumentBlock from '@/components/content-blocks/DocumentBlock';
-import InfogramBlock from '@/components/content-blocks/InfogramBlock';
-import ThinglinkBlock from '@/components/content-blocks/ThinglinkBlock';
-import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
-import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
-import SectionTitleBlock from '@/components/content-blocks/SectionTitleBlock';
-import ContentListBlock from '@/components/content-blocks/ContentListBlock';
-import ModuleRoomSlug from '@/components/content-blocks/ModuleRoomSlug';
-import Assignment from '@/components/content-blocks/assignment/Assignment';
-import Survey from '@/components/content-blocks/SurveyBlock';
-import Solution from '@/components/content-blocks/Solution';
-import Instruction from '@/components/content-blocks/Instruction';
-import BookmarkActions from '@/components/notes/BookmarkActions';
-
 import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
 
+const TextBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock');
+const InstrumentWidget = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InstrumentWidget');
+const ImageBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageBlock');
+const ImageUrlBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageUrlBlock');
+const VideoBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock');
+const LinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock');
+const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
+const InfogramBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InfogramBlock');
+const ThinglinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ThinglinkBlock');
+const GeniallyBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/GeniallyBlock');
+const SubtitleBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock');
+const SectionTitleBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SectionTitleBlock');
+const ContentListBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentListBlock');
+const ModuleRoomSlug = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ModuleRoomSlug');
+const Assignment = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/Assignment');
+const Survey = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SurveyBlock');
+const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
+const Instruction = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Instruction');
+const BookmarkActions = () => import(/* webpackChunkName: "content-components" */'@/components/notes/BookmarkActions');
+
 export default {
   props: ['component', 'parent', 'bookmarks', 'notes', 'root'],
 
diff --git a/client/src/components/content-blocks/DocumentBlock.vue b/client/src/components/content-blocks/DocumentBlock.vue
index 78381085..0f127925 100644
--- a/client/src/components/content-blocks/DocumentBlock.vue
+++ b/client/src/components/content-blocks/DocumentBlock.vue
@@ -15,8 +15,8 @@
 </template>
 
 <script>
-  import DocumentIcon from '@/components/icons/DocumentIcon';
-  import TrashIcon from '@/components/icons/TrashIcon';
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
+  const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
 
   export default {
     props: {
diff --git a/client/src/components/content-blocks/Instruction.vue b/client/src/components/content-blocks/Instruction.vue
index 6bca5be1..cd21c3bb 100644
--- a/client/src/components/content-blocks/Instruction.vue
+++ b/client/src/components/content-blocks/Instruction.vue
@@ -11,7 +11,7 @@
 
 <script>
   import me from '@/mixins/me';
-  import BulbIcon from '@/components/icons/BulbIcon';
+  const BulbIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon');
 
   export default {
     props: ['value'],
diff --git a/client/src/components/content-blocks/LinkBlock.vue b/client/src/components/content-blocks/LinkBlock.vue
index 9516c77e..dc5e8bc4 100644
--- a/client/src/components/content-blocks/LinkBlock.vue
+++ b/client/src/components/content-blocks/LinkBlock.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-  import LinkIcon from '@/components/icons/LinkIcon';
+  const LinkIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon');
 
   export default {
     props: {
diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index 772089c5..febdfd84 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -57,9 +57,9 @@
   import debounce from 'lodash/debounce';
   import cloneDeep from 'lodash/cloneDeep';
 
-  import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm';
-  import Solution from '@/components/content-blocks/Solution';
-  import SpellCheck from '@/components/content-blocks/assignment/SpellCheck';
+  const SubmissionForm = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SubmissionForm');
+  const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
+  const SpellCheck = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SpellCheck');
 
   export default {
     props: ['value'],
diff --git a/client/src/components/content-blocks/assignment/FinalSubmission.vue b/client/src/components/content-blocks/assignment/FinalSubmission.vue
index 107a25a7..46bac517 100644
--- a/client/src/components/content-blocks/assignment/FinalSubmission.vue
+++ b/client/src/components/content-blocks/assignment/FinalSubmission.vue
@@ -20,9 +20,10 @@
 </template>
 
 <script>
-  import InfoIcon from '@/components/icons/InfoIcon';
-  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
   import {newLineToParagraph} from '@/helpers/text';
+  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
+
+  const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');
 
   export default {
     props: {
diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue
index e3f2ac1a..bcc44889 100644
--- a/client/src/components/content-blocks/assignment/SubmissionForm.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionForm.vue
@@ -43,10 +43,11 @@
 </template>
 
 <script>
-  import SubmissionInput from '@/components/content-blocks/assignment/SubmissionInput';
-  import FinalSubmission from '@/components/content-blocks/assignment/FinalSubmission';
-  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
-  import FileUpload from '@/components/ui/file-upload/FileUpload';
+  const SubmissionInput = () => import('@/components/content-blocks/assignment/SubmissionInput');
+  const FinalSubmission = () => import('@/components/content-blocks/assignment/FinalSubmission');
+  const FileUpload = () => import('@/components/ui/file-upload/FileUpload');
+
+  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
 
   export default {
     props: {
diff --git a/client/src/components/content-blocks/assignment/SubmissionInput.vue b/client/src/components/content-blocks/assignment/SubmissionInput.vue
index 733ead81..772fd3e1 100644
--- a/client/src/components/content-blocks/assignment/SubmissionInput.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionInput.vue
@@ -25,8 +25,8 @@
 </template>
 
 <script>
-  import TickCircleIcon from '@/components/icons/TickCircleIcon';
-  import LoadingIcon from '@/components/icons/LoadingIcon';
+  const TickCircleIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TickCircleIcon');
+  const LoadingIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/LoadingIcon');
 
   export default {
     props: {
diff --git a/client/src/components/content-forms/AssignmentForm.vue b/client/src/components/content-forms/AssignmentForm.vue
index 6a13e5df..6eb0f285 100644
--- a/client/src/components/content-forms/AssignmentForm.vue
+++ b/client/src/components/content-forms/AssignmentForm.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-  import InfoIcon from '@/components/icons/InfoIcon';
+  const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');
 
   export default {
     props: ['value', 'index'],
diff --git a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
index fd6eeaaf..f1b3fa3b 100644
--- a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
+++ b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
@@ -49,12 +49,12 @@
 </template>
 
 <script>
-  import LinkIcon from '@/components/icons/LinkIcon';
-  import VideoIcon from '@/components/icons/VideoIcon';
-  import ImageIcon from '@/components/icons/ImageIcon';
-  import TextIcon from '@/components/icons/TextIcon';
-  import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
-  import DocumentIcon from '@/components/icons/DocumentIcon';
+  const LinkIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon');
+  const VideoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/VideoIcon');
+  const ImageIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ImageIcon');
+  const TextIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TextIcon');
+  const SpeechBubbleIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/SpeechBubbleIcon');
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
 
   export default {
     props: {
diff --git a/client/src/components/content-forms/DocumentForm.vue b/client/src/components/content-forms/DocumentForm.vue
index 7857d7e8..b5717ae4 100644
--- a/client/src/components/content-forms/DocumentForm.vue
+++ b/client/src/components/content-forms/DocumentForm.vue
@@ -18,10 +18,10 @@
 </template>
 
 <script>
-  import DocumentIcon from '@/components/icons/DocumentIcon';
-
   import {uploadcare} from '@/helpers/uploadcare';
 
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
+
   export default {
     props: ['value', 'index'],
 
diff --git a/client/src/components/content-forms/VideoForm.vue b/client/src/components/content-forms/VideoForm.vue
index f6cf00a6..5c4d168c 100644
--- a/client/src/components/content-forms/VideoForm.vue
+++ b/client/src/components/content-forms/VideoForm.vue
@@ -37,11 +37,11 @@
 </template>
 
 <script>
-  import InfoIcon from '@/components/icons/InfoIcon';
   import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
   import VimeoEmbed from '@/components/videos/VimeoEmbed';
   import SrfEmbed from '@/components/videos/SrfEmbed';
   import {isVimeoUrl, isYoutubeUrl, isSrfUrl} from '@/helpers/video';
+  const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');
 
   export default {
     props: ['value', 'index'],
diff --git a/client/src/components/instruments/FilterEntry.vue b/client/src/components/instruments/FilterEntry.vue
index 5044520e..d8017364 100644
--- a/client/src/components/instruments/FilterEntry.vue
+++ b/client/src/components/instruments/FilterEntry.vue
@@ -11,9 +11,9 @@
 </template>
 
 <script>
-  import ChevronRight from '@/components/icons/ChevronRight';
   import {INTERDISCIPLINARY, LANGUAGE_COMMUNICATION, SOCIETY} from '@/consts/instrument.consts';
   import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFiler.gql';
+  const ChevronRight = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight');
 
   export default {
     props: {
diff --git a/client/src/components/instruments/FilterGroup.vue b/client/src/components/instruments/FilterGroup.vue
index ebd5ab7a..a26ff22a 100644
--- a/client/src/components/instruments/FilterGroup.vue
+++ b/client/src/components/instruments/FilterGroup.vue
@@ -22,11 +22,11 @@
 </template>
 
 <script>
-  import ChevronRight from '@/components/icons/ChevronRight';
   import FilterEntry from '@/components/instruments/FilterEntry';
 
   import SET_FILTER_MUTATION from 'gql/local/mutations/setInstrumentFilter.gql';
   import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFiler.gql';
+  const ChevronRight = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight');
 
   export default {
     props: {
diff --git a/client/src/components/notes/BookmarkActions.vue b/client/src/components/notes/BookmarkActions.vue
index 69c0de10..193cc5d2 100644
--- a/client/src/components/notes/BookmarkActions.vue
+++ b/client/src/components/notes/BookmarkActions.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script>
-  import BookmarkIcon from '@/components/icons/BookmarkIcon';
-  import AddNoteIcon from '@/components/icons/AddNoteIcon';
-  import NoteIcon from '@/components/icons/NoteIcon';
-
   import {mapState} from 'vuex';
 
+  const BookmarkIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/BookmarkIcon');
+  const AddNoteIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddNoteIcon');
+  const NoteIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/NoteIcon');
+
   export default {
     props: ['bookmarked', 'note'],
     components: {
diff --git a/client/src/components/objective-groups/ObjectiveForm.vue b/client/src/components/objective-groups/ObjectiveForm.vue
index 5f923a2a..8a66f112 100644
--- a/client/src/components/objective-groups/ObjectiveForm.vue
+++ b/client/src/components/objective-groups/ObjectiveForm.vue
@@ -16,8 +16,8 @@
 </template>
 
 <script>
-  import TrashIcon from '@/components/icons/TrashIcon';
   import ModalInput from '@/components/ModalInput';
+  const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
 
   export default {
     props: ['objective'],
diff --git a/client/src/components/portfolio/AddProjectEntry.vue b/client/src/components/portfolio/AddProjectEntry.vue
index 0f509acf..afb8c0b9 100644
--- a/client/src/components/portfolio/AddProjectEntry.vue
+++ b/client/src/components/portfolio/AddProjectEntry.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-  import PlusIcon from '@/components/icons/PlusIcon';
+  const PlusIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PlusIcon');
   export default {
     props: ['project'],
     components: {PlusIcon},
diff --git a/client/src/components/portfolio/PortfolioOnboarding.vue b/client/src/components/portfolio/PortfolioOnboarding.vue
index fd03c03e..95518eda 100644
--- a/client/src/components/portfolio/PortfolioOnboarding.vue
+++ b/client/src/components/portfolio/PortfolioOnboarding.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-  const PortfolioIllustration = () => import('@/components/illustrations/PortfolioIllustration');
+  const PortfolioIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration');
   const CreateProjectButton = () => import('@/components/portfolio/CreateProjectButton');
   export default {
     components: {CreateProjectButton, PortfolioIllustration},
diff --git a/client/src/components/portfolio/ProjectActions.vue b/client/src/components/portfolio/ProjectActions.vue
index 62a16ca2..0f3a6509 100644
--- a/client/src/components/portfolio/ProjectActions.vue
+++ b/client/src/components/portfolio/ProjectActions.vue
@@ -38,13 +38,13 @@
 </template>
 
 <script>
-import Ellipses from '@/components/icons/Ellipses.vue';
 import WidgetPopover from '@/components/ui/WidgetPopover';
 
 import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
 import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
 
 import updateProjectShareState from '@/mixins/update-project-share-state';
+const Ellipses = () => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses.vue');
 
 export default {
   props: {
diff --git a/client/src/components/portfolio/ProjectEntry.vue b/client/src/components/portfolio/ProjectEntry.vue
index 4f37672f..41e760c0 100644
--- a/client/src/components/portfolio/ProjectEntry.vue
+++ b/client/src/components/portfolio/ProjectEntry.vue
@@ -38,12 +38,12 @@
 </template>
 
 <script>
-  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
   import MoreOptionsWidget from '@/components/MoreOptionsWidget';
 
   import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql';
   import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
   import {dateFilter, dateTimeFilter} from '@/filters/date-filter';
+  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
 
   export default {
     props: ['description', 'documentUrl', 'created', 'id', 'readOnly'],
diff --git a/client/src/components/portfolio/ProjectEntryForm.vue b/client/src/components/portfolio/ProjectEntryForm.vue
index 341a015f..d6f985b8 100644
--- a/client/src/components/portfolio/ProjectEntryForm.vue
+++ b/client/src/components/portfolio/ProjectEntryForm.vue
@@ -49,12 +49,13 @@
   import TextFormWithHelpText from '@/components/content-forms/TextFormWithHelpText';
   import DocumentForm from '@/components/content-forms/DocumentForm';
   import TextForm from '@/components/content-forms/TextForm';
-  import DocumentIcon from '@/components/icons/DocumentIcon';
-  import NoteIcon from '@/components/icons/NoteIcon';
   import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
-  import SimpleFileUpload from '@/components/ui/file-upload/SimpleFileUpload';
-  import FileUpload from '@/components/ui/file-upload/FileUpload';
+
   import {PROJECT_ENTRY_TEMPLATE} from '@/consts/strings.consts';
+  const SimpleFileUpload = () => import('@/components/ui/file-upload/SimpleFileUpload');
+  const FileUpload = () => import('@/components/ui/file-upload/FileUpload');
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
+  const NoteIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/NoteIcon');
 
   export default {
     props: {
diff --git a/client/src/components/portfolio/ShareLink.vue b/client/src/components/portfolio/ShareLink.vue
index b42b9701..babe3ad0 100644
--- a/client/src/components/portfolio/ShareLink.vue
+++ b/client/src/components/portfolio/ShareLink.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-  import ShareIcon from '@/components/icons/ShareIcon';
+  const ShareIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ShareIcon');
 
   export default {
     props: {
diff --git a/client/src/components/profile/ActivityEntry.vue b/client/src/components/profile/ActivityEntry.vue
index 7feb517e..8a5edf70 100644
--- a/client/src/components/profile/ActivityEntry.vue
+++ b/client/src/components/profile/ActivityEntry.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-  import ChevronRight from '@/components/icons/ChevronRight';
+  const ChevronRight = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight');
 
   export default {
     props: ['title'],
diff --git a/client/src/components/profile/Avatar.vue b/client/src/components/profile/Avatar.vue
index 3fcc46aa..d54ded1b 100644
--- a/client/src/components/profile/Avatar.vue
+++ b/client/src/components/profile/Avatar.vue
@@ -30,11 +30,11 @@
 </template>
 
 <script>
-  import DefaultAvatar from '@/components/icons/DefaultAvatar';
-  import PenIcon from '@/components/icons/PenIcon';
-
   import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
 
+  const DefaultAvatar = () => import(/* webpackChunkName: "icons" */'@/components/icons/DefaultAvatar');
+  const PenIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon');
+
   export default {
     props: {
       avatarUrl: {
diff --git a/client/src/components/profile/ContentBookmark.vue b/client/src/components/profile/ContentBookmark.vue
index 0cd3b040..02d385e4 100644
--- a/client/src/components/profile/ContentBookmark.vue
+++ b/client/src/components/profile/ContentBookmark.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-  import LinkBlock from '@/components/content-blocks/LinkBlock';
+  const LinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock');
 
   export default {
     props: ['bookmark'],
diff --git a/client/src/components/profile/EditGroupName.vue b/client/src/components/profile/EditGroupName.vue
index 750b12ad..e00e44b7 100644
--- a/client/src/components/profile/EditGroupName.vue
+++ b/client/src/components/profile/EditGroupName.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-  import PenIcon from '@/components/icons/PenIcon';
+  const PenIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon');
 
   export default {
     components: {
diff --git a/client/src/components/profile/Profile.vue b/client/src/components/profile/Profile.vue
index 3b5f7849..577dfe7f 100644
--- a/client/src/components/profile/Profile.vue
+++ b/client/src/components/profile/Profile.vue
@@ -24,7 +24,7 @@
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
   import AvatarUploadForm from '@/components/profile/AvatarUploadForm';
   import Avatar from '@/components/profile/Avatar';
-  import TrashIcon from '@/components/icons/TrashIcon';
+  const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
 
   export default {
     components: {
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index f57b6c03..209a9c05 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -64,7 +64,6 @@
 
 <script>
   import ProfileWidget from '@/components/profile/ProfileWidget';
-  import Cross from '@/components/icons/Cross';
 
   import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
 
@@ -72,6 +71,7 @@
   import me from '@/mixins/me';
   import LogoutWidget from '@/components/LogoutWidget';
   import {MY_TEAM} from '@/router/me.names';
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
 
   export default {
 
diff --git a/client/src/components/rooms/AddRoomEntryButton.vue b/client/src/components/rooms/AddRoomEntryButton.vue
index 1d32a2bb..4c047f8e 100644
--- a/client/src/components/rooms/AddRoomEntryButton.vue
+++ b/client/src/components/rooms/AddRoomEntryButton.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-  import PlusIcon from '@/components/icons/PlusIcon';
+  const PlusIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PlusIcon');
 
   export default {
     props: ['parent'],
diff --git a/client/src/components/rooms/EntryCountWidget.vue b/client/src/components/rooms/EntryCountWidget.vue
index c032e2bd..9775690b 100644
--- a/client/src/components/rooms/EntryCountWidget.vue
+++ b/client/src/components/rooms/EntryCountWidget.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-  import Cards from '@/components/icons/Cards.vue';
+  const Cards = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cards.vue');
 
   export default {
     props: {
diff --git a/client/src/components/rooms/MoreActions.vue b/client/src/components/rooms/MoreActions.vue
index 7b97f0c4..d8610ec3 100644
--- a/client/src/components/rooms/MoreActions.vue
+++ b/client/src/components/rooms/MoreActions.vue
@@ -17,8 +17,8 @@
 </template>
 
 <script>
-  import Ellipses from '@/components/icons/Ellipses';
   import WidgetPopover from '@/components/ui/WidgetPopover';
+  const Ellipses = () => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses');
 
   export default {
     props: {
diff --git a/client/src/components/rooms/RoomGroupWidget.vue b/client/src/components/rooms/RoomGroupWidget.vue
index cd7763d4..18064a92 100644
--- a/client/src/components/rooms/RoomGroupWidget.vue
+++ b/client/src/components/rooms/RoomGroupWidget.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-  import Group from '@/components/icons/Group.vue';
+  const Group = () => import(/* webpackChunkName: "icons" */'@/components/icons/Group.vue');
 
   export default {
     props: ['name'],
diff --git a/client/src/components/rooms/RoomVisibilityWidget.vue b/client/src/components/rooms/RoomVisibilityWidget.vue
index 68af130a..3fa56eaf 100644
--- a/client/src/components/rooms/RoomVisibilityWidget.vue
+++ b/client/src/components/rooms/RoomVisibilityWidget.vue
@@ -14,8 +14,8 @@
 
 <script>
 
-  import EyeIcon from '@/components/icons/EyeIcon';
-  import ClosedEyeIcon from '@/components/icons/ClosedEyeIcon';
+  const EyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon');
+  const ClosedEyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ClosedEyeIcon');
 
   export default {
     props: {
diff --git a/client/src/components/rooms/RoomsOnboarding.vue b/client/src/components/rooms/RoomsOnboarding.vue
index 0ba1ff65..aca54a70 100644
--- a/client/src/components/rooms/RoomsOnboarding.vue
+++ b/client/src/components/rooms/RoomsOnboarding.vue
@@ -24,7 +24,7 @@
 
 <script>
   import {NEW_ROOM_PAGE} from '@/router/room.names';
-  const RoomsIllustration = () => import('@/components/illustrations/RoomsIllustration');
+  const RoomsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration');
 
   export default {
     props: {
diff --git a/client/src/components/school-class/ClassSelectionWidget.vue b/client/src/components/school-class/ClassSelectionWidget.vue
index d185915c..1f0988a4 100644
--- a/client/src/components/school-class/ClassSelectionWidget.vue
+++ b/client/src/components/school-class/ClassSelectionWidget.vue
@@ -51,13 +51,13 @@
 
 <script>
   import WidgetPopover from '@/components/ui/WidgetPopover';
-  import ChevronDown from '@/components/icons/ChevronDown';
   import CurrentClass from '@/components/school-class/CurrentClass';
-  import AddIcon from '@/components/icons/AddIcon';
 
   import updateSelectedClassMixin from '@/mixins/update-selected-class';
   import sidebarMixin from '@/mixins/sidebar';
   import meMixin from '@/mixins/me';
+  const ChevronDown = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronDown');
+  const AddIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon');
 
   export default {
 
diff --git a/client/src/components/ui/BaseInput.vue b/client/src/components/ui/BaseInput.vue
index 430ca90e..7724c789 100644
--- a/client/src/components/ui/BaseInput.vue
+++ b/client/src/components/ui/BaseInput.vue
@@ -26,8 +26,8 @@
 </template>
 
 <script>
-  import Tick from '@/components/icons/Tick';
-  import CircleIcon from '@/components/icons/CircleIcon';
+  const Tick = () => import(/* webpackChunkName: "icons" */'@/components/icons/Tick');
+  const CircleIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/CircleIcon');
 
   export default {
     props: {
diff --git a/client/src/components/ui/ButtonWithIconAndText.vue b/client/src/components/ui/ButtonWithIconAndText.vue
index 5a4cdb1f..dd81efb4 100644
--- a/client/src/components/ui/ButtonWithIconAndText.vue
+++ b/client/src/components/ui/ButtonWithIconAndText.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-  import DocumentIcon from '@/components/icons/DocumentIcon';
-  import DocumentWithLinesIcon from '@/components/icons/DocumentWithLinesIcon';
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
+  const DocumentWithLinesIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentWithLinesIcon');
 
   export default {
     props: {
diff --git a/client/src/components/ui/PopoverLink.vue b/client/src/components/ui/PopoverLink.vue
index 23a533f3..7677e228 100644
--- a/client/src/components/ui/PopoverLink.vue
+++ b/client/src/components/ui/PopoverLink.vue
@@ -14,9 +14,9 @@
 </template>
 
 <script>
-  import EyeIcon from '@/components/icons/EyeIcon';
-  import TrashIcon from '@/components/icons/TrashIcon';
-  import PenIcon from '@/components/icons/PenIcon';
+  const EyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon');
+  const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
+  const PenIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon');
 
   export default {
     props: {
diff --git a/client/src/components/ui/file-upload/FileUpload.vue b/client/src/components/ui/file-upload/FileUpload.vue
index 09205266..a7da96fb 100644
--- a/client/src/components/ui/file-upload/FileUpload.vue
+++ b/client/src/components/ui/file-upload/FileUpload.vue
@@ -21,8 +21,8 @@
 </template>
 
 <script>
-  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
-  import SimpleFileUpload from '@/components/ui/file-upload/SimpleFileUpload';
+  const SimpleFileUpload = () => import('@/components/ui/file-upload/SimpleFileUpload');
+  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
 
   export default {
     props: {
diff --git a/client/src/components/ui/file-upload/SimpleFileUpload.vue b/client/src/components/ui/file-upload/SimpleFileUpload.vue
index c6a3c8ad..0fab370f 100644
--- a/client/src/components/ui/file-upload/SimpleFileUpload.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUpload.vue
@@ -9,10 +9,10 @@
 
 <script>
 
-  import DocumentIcon from '@/components/icons/DocumentIcon';
-  import SimpleFileUploadHiddenInput from '@/components/ui/file-upload/SimpleFileUploadHiddenInput';
-  import SimpleFileUploadIcon from '@/components/ui/file-upload/SimpleFileUploadIcon';
-  import SimpleFileUploadIconAndText from '@/components/ui/file-upload/SimpleFileUploadIconAndText';
+  const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput');
+  const SimpleFileUploadIcon = () => import('@/components/ui/file-upload/SimpleFileUploadIcon');
+  const SimpleFileUploadIconAndText = () => import('@/components/ui/file-upload/SimpleFileUploadIconAndText');
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
 
   export default {
     props: {
diff --git a/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue b/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue
index d7ed76c4..763acf46 100644
--- a/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-  import DocumentIcon from '@/components/icons/DocumentIcon';
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
 
   export default {
     components: {DocumentIcon},
diff --git a/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue b/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
index de4f69e6..601af0b5 100644
--- a/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
@@ -11,9 +11,9 @@
 </template>
 
 <script>
-  import DocumentIcon from '@/components/icons/DocumentIcon';
-  import SimpleFileUploadHiddenInput from '@/components/ui/file-upload/SimpleFileUploadHiddenInput';
-  import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
+  const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput');
+  const ButtonWithIconAndText = () => import('@/components/ui/ButtonWithIconAndText');
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
 
   export default {
     props: ['value'],
diff --git a/client/src/components/visibility/VisibilityAction.vue b/client/src/components/visibility/VisibilityAction.vue
index 05af19c0..0940e7dd 100644
--- a/client/src/components/visibility/VisibilityAction.vue
+++ b/client/src/components/visibility/VisibilityAction.vue
@@ -15,14 +15,14 @@
 </template>
 
 <script>
-  import EyeIcon from '@/components/icons/EyeIcon';
-  import ClosedEyeIcon from '@/components/icons/ClosedEyeIcon';
-
   import me from '@/mixins/me';
 
   import {TYPES, CONTENT_TYPE} from '@/consts/types';
   import {createVisibilityMutation, hidden} from '@/helpers/visibility';
 
+  const EyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon');
+  const ClosedEyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ClosedEyeIcon');
+
   export default {
     props: {
       block: {
diff --git a/client/src/helpers/uploadcare.js b/client/src/helpers/uploadcare.js
index f9cdd31c..2959ac8c 100644
--- a/client/src/helpers/uploadcare.js
+++ b/client/src/helpers/uploadcare.js
@@ -1,23 +1,24 @@
-import uploadcareWidget from 'uploadcare-widget';
+export const uploadcare = (component, callback) => import(/* webpackChunkName: "uploadcare" */'uploadcare-widget')
+  .then(module => {
+    const uploadcareWidget = module.default;
 
-export const uploadcare = (component, callback) => { // callback with signature parameter `url`
-  const uploadcarePanel = uploadcareWidget.openPanel(component.$refs['uploadcare-panel'], null, {
-    tabs: ['file'],
-  });
+    const uploadcarePanel = uploadcareWidget.openPanel(component.$refs['uploadcare-panel'], null, {
+      tabs: ['file'],
+    });
 
-  // HACK to change the text of the Uploadcare dynamically we need to change the text here directly
-  setTimeout(() => {
-    const formElem = component.$refs['documentform'];
-    if (formElem.getElementsByClassName('uploadcare--text_size_extra-large').length > 1) {
-      formElem.getElementsByClassName('uploadcare--text_size_extra-large')[1].innerText = 'Ziehen Sie ein Dokument hier hinein';
-      formElem.getElementsByClassName('uploadcare--tab__action-button')[0].innerText = 'Wählen Sie ein lokales Dokument';
-    }
-  }, 0);
+    // HACK to change the text of the Uploadcare dynamically we need to change the text here directly
+    setTimeout(() => {
+      const formElem = component.$refs['documentform'];
+      if (formElem.getElementsByClassName('uploadcare--text_size_extra-large').length > 1) {
+        formElem.getElementsByClassName('uploadcare--text_size_extra-large')[1].innerText = 'Ziehen Sie ein Dokument hier hinein';
+        formElem.getElementsByClassName('uploadcare--tab__action-button')[0].innerText = 'Wählen Sie ein lokales Dokument';
+      }
+    }, 0);
 
-  return uploadcarePanel.done(panelResult => {
-    panelResult.done(fileInfo => {
-      let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
-      callback(urlWithFilename);
+    return uploadcarePanel.done(panelResult => {
+      panelResult.done(fileInfo => {
+        let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
+        callback(urlWithFilename);
+      });
     });
   });
-};
diff --git a/client/src/layouts/DefaultFooter.vue b/client/src/layouts/DefaultFooter.vue
index a0940262..4ab6ba0c 100644
--- a/client/src/layouts/DefaultFooter.vue
+++ b/client/src/layouts/DefaultFooter.vue
@@ -49,8 +49,8 @@
 </template>
 
 <script>
-  import HepLogo from '@/components/icons/HepLogo';
-  import EhbLogo from '@/components/icons/EhbLogo';
+  const HepLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogo');
+  const EhbLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo');
 
   export default {
     components: {
diff --git a/client/src/layouts/FullScreenLayout.vue b/client/src/layouts/FullScreenLayout.vue
index 307c5a89..9a771d8a 100644
--- a/client/src/layouts/FullScreenLayout.vue
+++ b/client/src/layouts/FullScreenLayout.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-  import Cross from '@/components/icons/Cross';
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
 
   export default {
     components: {
diff --git a/client/src/layouts/PublicLayout.vue b/client/src/layouts/PublicLayout.vue
index 9a7918b9..55135465 100644
--- a/client/src/layouts/PublicLayout.vue
+++ b/client/src/layouts/PublicLayout.vue
@@ -10,9 +10,9 @@
   </div>
 </template>
 <script>
-  import Logo from '@/components/icons/Logo';
   import DefaultFooter from '@/layouts/DefaultFooter';
   import enableFooter from '@/helpers/footer';
+  const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
 
   export default {
     components: {
diff --git a/client/src/layouts/SimpleLayout.vue b/client/src/layouts/SimpleLayout.vue
index 1f83af9b..1ed799ab 100644
--- a/client/src/layouts/SimpleLayout.vue
+++ b/client/src/layouts/SimpleLayout.vue
@@ -15,9 +15,9 @@
 </template>
 
 <script>
-  import Cross from '@/components/icons/Cross';
   import SimpleFooter from '@/layouts/SimpleFooter';
   import enableFooter from '@/helpers/footer';
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
 
   export default {
     components: {
diff --git a/client/src/layouts/SplitLayout.vue b/client/src/layouts/SplitLayout.vue
index cf779a55..9f7d110e 100644
--- a/client/src/layouts/SplitLayout.vue
+++ b/client/src/layouts/SplitLayout.vue
@@ -10,10 +10,10 @@
 </template>
 
 <script>
-  const ContentsIllustration = () => import('@/components/illustrations/ContentsIllustration');
-  const PortfolioIllustration = () => import('@/components/illustrations/PortfolioIllustration');
-  const RoomsIllustration = () => import('@/components/illustrations/RoomsIllustration');
-  const HelloIllustration = () => import('@/components/illustrations/HelloIllustration');
+  const ContentsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/ContentsIllustration');
+  const PortfolioIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration');
+  const RoomsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration');
+  const HelloIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/HelloIllustration');
 
   export default {
     components: {
diff --git a/client/src/pages/article.vue b/client/src/pages/article.vue
index f0a44aa9..35221b34 100644
--- a/client/src/pages/article.vue
+++ b/client/src/pages/article.vue
@@ -25,18 +25,18 @@
 </template>
 
 <script>
-  import TextBlock from '@/components/content-blocks/TextBlock';
-  import ImageBlock from '@/components/content-blocks/ImageBlock';
-  import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock';
-  import VideoBlock from '@/components/content-blocks/VideoBlock';
-  import LinkBlock from '@/components/content-blocks/LinkBlock';
-  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
   import UserMetaWidget from '@/components/UserMetaWidget';
 
   import ROOM_ENTRY_QUERY from '@/graphql/gql/queries/roomEntryQuery.gql';
   import ADD_COMMENT_MUTATION from 'gql/mutations/addComment.gql';
   import CommentInput from '@/components/rooms/CommentInput';
   import Comment from '@/components/rooms/Comment';
+  const TextBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock');
+  const ImageBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageBlock');
+  const ImageUrlBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageUrlBlock');
+  const VideoBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock');
+  const LinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock');
+  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
 
   export default {
     components: {
diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
index c26bd6f5..077bd03b 100644
--- a/client/src/pages/hello.vue
+++ b/client/src/pages/hello.vue
@@ -63,10 +63,10 @@
 
   import LoadingButton from '@/components/LoadingButton';
   import pageTitleMixin from '@/mixins/page-title';
-  import HepLogoNoClaim from '@/components/icons/HepLogoNoClaim';
-  import EhbLogo from '@/components/icons/EhbLogo';
-  import Logo from '@/components/icons/Logo';
-  const HelloIllustration = () => import('@/components/illustrations/HelloIllustration');
+  const HepLogoNoClaim = () => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogoNoClaim');
+  const EhbLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo');
+  const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
+  const HelloIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/HelloIllustration');
 
   export default {
     mixins: [pageTitleMixin],
diff --git a/client/src/pages/instrument.vue b/client/src/pages/instrument.vue
index 2dac00ce..1bfe78ae 100644
--- a/client/src/pages/instrument.vue
+++ b/client/src/pages/instrument.vue
@@ -25,7 +25,7 @@
 <script>
   import INSTRUMENT_QUERY from '@/graphql/gql/queries/instrumentQuery.gql';
 
-  import ContentComponent from '@/components/content-blocks/ContentComponent';
+  const ContentComponent = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent');
 
   export default {
     apollo: {
diff --git a/client/src/pages/module/moduleVisibility.vue b/client/src/pages/module/moduleVisibility.vue
index 43da56f5..5e3bf6f7 100644
--- a/client/src/pages/module/moduleVisibility.vue
+++ b/client/src/pages/module/moduleVisibility.vue
@@ -38,14 +38,14 @@
 </template>
 
 <script>
-  import EyeIcon from '@/components/icons/EyeIcon';
-
   import me from '@/mixins/me';
 
   import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
   import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery';
   import {MODULE_PAGE} from '@/router/module.names';
 
+  const EyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon');
+
   export default {
 
     mixins: [me],
diff --git a/client/src/pages/onboarding/start.vue b/client/src/pages/onboarding/start.vue
index b2d6b941..96694f4e 100644
--- a/client/src/pages/onboarding/start.vue
+++ b/client/src/pages/onboarding/start.vue
@@ -10,10 +10,10 @@
 </template>
 
 <script>
-  import Logo from '@/components/icons/Logo';
-
   import pageTitleMixin from '@/mixins/page-title';
 
+  const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
+
   export default {
 
     mixins: [pageTitleMixin],
diff --git a/client/src/pages/portfolio/project.vue b/client/src/pages/portfolio/project.vue
index b701df39..9855dbf7 100644
--- a/client/src/pages/portfolio/project.vue
+++ b/client/src/pages/portfolio/project.vue
@@ -61,10 +61,10 @@
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
   import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
   import BackLink from '@/components/BackLink';
-  import ShareIcon from '@/components/icons/ShareIcon';
   import ShareLink from '@/components/portfolio/ShareLink';
 
   import updateProjectShareState from '@/mixins/update-project-share-state';
+  const ShareIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ShareIcon');
 
   export default {
     props: ['slug'],
diff --git a/client/src/pages/start-old.vue b/client/src/pages/start-old.vue
index 8081425c..f7fc00ad 100644
--- a/client/src/pages/start-old.vue
+++ b/client/src/pages/start-old.vue
@@ -63,9 +63,9 @@
 
   import meMixin from '@/mixins/me';
 
-  const ContentsIllustration = () => import('@/components/illustrations/ContentsIllustration');
-  const PortfolioIllustration = () => import('@/components/illustrations/PortfolioIllustration');
-  const RoomsIllustration = () => import('@/components/illustrations/RoomsIllustration');
+  const ContentsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/ContentsIllustration');
+  const PortfolioIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration');
+  const RoomsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration');
 
   export default {
 
@@ -99,7 +99,6 @@
 </script>
 
 <style scoped lang="scss">
-
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index 79a09ff7..ea4655db 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -65,10 +65,6 @@
   import HeaderBar from '@/components/HeaderBar';
   import ModuleTeaser from '@/components/modules/ModuleTeaser';
 
-  import ContentsIllustration from '@/components/illustrations/ContentsIllustration';
-  import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
-  import RoomsIllustration from '@/components/illustrations/RoomsIllustration';
-
   import MobileHeader from '@/components/MobileHeader';
 
   import meQuery from '@/mixins/me';
@@ -76,6 +72,10 @@
 
   import pageTitleMixin from '@/mixins/page-title';
 
+  const ContentsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/ContentsIllustration');
+  const PortfolioIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration');
+  const RoomsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration');
+
   export default {
 
     mixins: [meQuery, news, pageTitleMixin],
diff --git a/client/src/pages/survey.vue b/client/src/pages/survey.vue
index c6e0fdb5..78d189b0 100644
--- a/client/src/pages/survey.vue
+++ b/client/src/pages/survey.vue
@@ -20,7 +20,6 @@
 
   import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
   import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
-  import Solution from '@/components/content-blocks/Solution';
 
   import {extractSurveySolutions} from '@/helpers/survey-solutions';
   import {isTeacher} from '@/helpers/is-teacher';
@@ -28,6 +27,7 @@
   import {meQuery} from '@/graphql/queries';
 
   import * as SurveyVue from 'survey-vue';
+  const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
 
   const {Survey, Model} = SurveyVue;
 
diff --git a/client/src/pages/topic.vue b/client/src/pages/topic.vue
index ac56a89b..b424e208 100644
--- a/client/src/pages/topic.vue
+++ b/client/src/pages/topic.vue
@@ -41,14 +41,14 @@
 
 <script>
   import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
-  import PlayIcon from '@/components/icons/Play';
-  import BulbIcon from '@/components/icons/BulbIcon';
   import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
   import me from '@/mixins/me';
   import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
 
   import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+  const PlayIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/Play');
+  const BulbIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon');
 
   export default {
 
diff --git a/client/src/router/auth.routes.js b/client/src/router/auth.routes.js
index 6e8e71a7..8b72895c 100644
--- a/client/src/router/auth.routes.js
+++ b/client/src/router/auth.routes.js
@@ -1,9 +1,9 @@
 import {LICENSE_ACTIVATION} from '@/router/auth.names';
 
-const hello = () => import('@/pages/hello');
-const betaLogin = () => import('@/pages/beta-login');
-const loginError = () => import('@/pages/login-error');
-const licenseActivation = () => import('@/pages/license-activation');
+const hello = () => import(/* webpackChunkName: "auth" */'@/pages/hello');
+const betaLogin = () => import(/* webpackChunkName: "auth" */'@/pages/beta-login');
+const loginError = () => import(/* webpackChunkName: "auth" */'@/pages/login-error');
+const licenseActivation = () => import(/* webpackChunkName: "auth" */'@/pages/license-activation');
 
 export default [
   {
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 5651152b..d5e77804 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -15,14 +15,19 @@ import {EMAIL_NOT_VERIFIED_STATE, NO_VALID_LICENSE_STATE, SUCCESS_STATE} from '.
 
 import start from '@/pages/start';
 
-const surveyPage = () => import('@/pages/survey');
+const instrument = () => import(/* webpackChunkName: "instruments" */'@/pages/instrument');
+const instrumentOverview = () => import(/* webpackChunkName: "instruments" */'@/pages/instrumentOverview');
+
+const article = () => import(/* webpackChunkName: "news" */'@/pages/article');
+const news = () => import(/* webpackChunkName: "news" */'@/pages/news');
+
+const surveyPage = () => import(/* webpackChunkName: "survey" */'@/pages/survey');
+
 const styleGuidePage = () => import('@/pages/styleguide');
 const joinClass = () => import('@/pages/joinClass');
-const news = () => import('@/pages/news');
+
 const topic = () => import('@/pages/topic');
-const article = () => import('@/pages/article');
-const instrument = () => import('@/pages/instrument');
-const instrumentOverview = () => import('@/pages/instrumentOverview');
+
 const p404 = () => import('@/pages/p404');
 const submission = () => import('@/pages/studentSubmission');
 
diff --git a/client/src/router/me.routes.js b/client/src/router/me.routes.js
index fc5a8b6e..4d7bc2f8 100644
--- a/client/src/router/me.routes.js
+++ b/client/src/router/me.routes.js
@@ -1,17 +1,17 @@
 import {CREATE_TEAM, JOIN_TEAM, MY_TEAM, SHOW_SCHOOL_CLASS_CODE, SHOW_TEAM_CODE} from './me.names';
 import {LAYOUT_SIMPLE} from '@/router/core.constants';
 
-const profilePage = () => import('@/pages/profile');
-const profile = () => import('@/components/profile/Profile');
-const myClass = () => import('@/pages/myClass');
-const activity = () => import('@/pages/activity');
-const oldClasses = () => import('@/pages/oldClasses');
-const createClass = () => import('@/pages/createClass');
-const showSchoolClassCode = () => import('@/pages/me/showSchoolClassCode');
-const showTeamCode = () => import('@/pages/me/showTeamCode');
-const myTeam = () => import('@/pages/me/myTeam');
-const joinTeam = () => import('@/pages/me/joinTeam');
-const createTeam = () => import('@/pages/me/createTeam');
+const profilePage = () => import(/* webpackChunkName: "profile" */'@/pages/profile');
+const profile = () => import(/* webpackChunkName: "profile" */'@/components/profile/Profile');
+const myClass = () => import(/* webpackChunkName: "profile" */'@/pages/myClass');
+const activity = () => import(/* webpackChunkName: "profile" */'@/pages/activity');
+const oldClasses = () => import(/* webpackChunkName: "profile" */'@/pages/oldClasses');
+const createClass = () => import(/* webpackChunkName: "profile" */'@/pages/createClass');
+const showSchoolClassCode = () => import(/* webpackChunkName: "profile" */'@/pages/me/showSchoolClassCode');
+const showTeamCode = () => import(/* webpackChunkName: "profile" */'@/pages/me/showTeamCode');
+const myTeam = () => import(/* webpackChunkName: "profile" */'@/pages/me/myTeam');
+const joinTeam = () => import(/* webpackChunkName: "profile" */'@/pages/me/joinTeam');
+const createTeam = () => import(/* webpackChunkName: "profile" */'@/pages/me/createTeam');
 
 export default [
   {
diff --git a/client/src/router/module.routes.js b/client/src/router/module.routes.js
index c974e902..12529872 100644
--- a/client/src/router/module.routes.js
+++ b/client/src/router/module.routes.js
@@ -8,13 +8,13 @@ import {
 } from '@/router/module.names';
 import {LAYOUT_SIMPLE} from '@/router/core.constants';
 
-const moduleBase = () => import('@/pages/module/module-base');
-const module = () => import('@/pages/module/module');
-const submissions = () => import('@/pages/submissions');
-const moduleVisibility = () => import('@/pages/module/moduleVisibility');
-const settingsPage = () => import('@/pages/module/moduleSettings');
-const snapshots = () => import('@/pages/snapshot/snapshots');
-const snapshot = () => import('@/pages/snapshot/snapshot');
+const moduleBase = () => import(/* webpackChunkName: "modules" */'@/pages/module/module-base');
+const module = () => import(/* webpackChunkName: "modules" */'@/pages/module/module');
+const submissions = () => import(/* webpackChunkName: "modules" */'@/pages/submissions');
+const moduleVisibility = () => import(/* webpackChunkName: "modules" */'@/pages/module/moduleVisibility');
+const settingsPage = () => import(/* webpackChunkName: "modules" */'@/pages/module/moduleSettings');
+const snapshots = () => import(/* webpackChunkName: "modules" */'@/pages/snapshot/snapshots');
+const snapshot = () => import(/* webpackChunkName: "modules" */'@/pages/snapshot/snapshot');
 
 export default [
   {
diff --git a/client/src/router/onboarding.routes.js b/client/src/router/onboarding.routes.js
index 99eba7b8..c7afb5da 100644
--- a/client/src/router/onboarding.routes.js
+++ b/client/src/router/onboarding.routes.js
@@ -1,10 +1,10 @@
 import {ONBOARDING_STEP_1, ONBOARDING_STEP_2, ONBOARDING_STEP_3} from '@/router/onboarding.names';
 
-const onboarding = () => import('@/pages/onboarding');
-const onboardingStart = () => import('@/pages/onboarding/start');
-const onboardingStep1 = () => import('@/pages/onboarding/step1');
-const onboardingStep2 = () => import('@/pages/onboarding/step2');
-const onboardingStep3 = () => import('@/pages/onboarding/step3');
+const onboarding = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding');
+const onboardingStart = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/start');
+const onboardingStep1 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step1');
+const onboardingStep2 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step2');
+const onboardingStep3 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step3');
 
 export default [
   {
diff --git a/client/src/router/portfolio.routes.js b/client/src/router/portfolio.routes.js
index f5824ab0..94bb0dfc 100644
--- a/client/src/router/portfolio.routes.js
+++ b/client/src/router/portfolio.routes.js
@@ -1,8 +1,8 @@
 import {NEW_PROJECT_PAGE, PROJECTS_PAGE} from '@/router/portfolio.names';
-const portfolio = () => import('@/pages/portfolio/portfolio');
-const project = () => import('@/pages/portfolio/project');
-const newProject = () => import('@/pages/portfolio/newProject');
-const editProject = () => import('@/pages/portfolio/editProject');
+const portfolio = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/portfolio');
+const project = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/project');
+const newProject = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/newProject');
+const editProject = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/editProject');
 
 const portfolioRoutes = [
   {path: '/portfolio', name: PROJECTS_PAGE, component: portfolio, meta: {hideFooter: true}},
diff --git a/client/src/router/room.routes.js b/client/src/router/room.routes.js
index cd50d693..e1053d11 100644
--- a/client/src/router/room.routes.js
+++ b/client/src/router/room.routes.js
@@ -1,10 +1,10 @@
 import {NEW_ROOM_PAGE, ROOMS_PAGE} from '@/router/room.names';
 
-const rooms = () => import('@/pages/rooms');
-const newRoom = () => import('@/pages/newRoom');
-const editRoom = () => import('@/pages/editRoom');
-const room = () => import('@/pages/room');
-const moduleRoom = () => import('@/pages/module/moduleRoom');
+const rooms = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms');
+const newRoom = () => import(/* webpackChunkName: "rooms" */'@/pages/newRoom');
+const editRoom = () => import(/* webpackChunkName: "rooms" */'@/pages/editRoom');
+const room = () => import(/* webpackChunkName: "rooms" */'@/pages/room');
+const moduleRoom = () => import(/* webpackChunkName: "rooms" */'@/pages/module/moduleRoom');
 
 export default [
   {path: '/rooms', name: ROOMS_PAGE, component: rooms, meta: {filter: true, hideFooter: true}},