Split code into more bandwidth-friendly chunks

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'],

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'],

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: {

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: {

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'],

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',

client/src/components/FullscreenInfographic.vue

@@ -8,8 +8,8 @@
 
 <script>
   import Modal from '@/components/Modal';
-  import InfogramBlock from '@/components/content-blocks/InfogramBlock';
+  const InfogramBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InfogramBlock');
-  import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
+  const GeniallyBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/GeniallyBlock');
 
   export default {
     components: {

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],
 

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'],

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: {

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],
 

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: {

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: {

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: {

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',

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: {

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],
 

client/src/components/book-navigation/SubNavigationItem.vue

@@ -19,8 +19,8 @@
 </template>
 
 <script>
-  import ChevronDown from '@/components/icons/ChevronDown';
+  const ChevronDown = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronDown');
-  import ChevronUp from '@/components/icons/ChevronUp';
+  const ChevronUp = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronUp');
 
   export default {
     props: ['title'],

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 TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
-  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 Checkbox = () => import('@/components/ui/Checkbox');
 
   export default {

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'],
 

client/src/components/content-blocks/DocumentBlock.vue

@@ -15,8 +15,8 @@
 </template>
 
 <script>
-  import DocumentIcon from '@/components/icons/DocumentIcon';
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
-  import TrashIcon from '@/components/icons/TrashIcon';
+  const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
 
   export default {
     props: {

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'],

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: {

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';
+  const SubmissionForm = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SubmissionForm');
-  import Solution from '@/components/content-blocks/Solution';
+  const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
-  import SpellCheck from '@/components/content-blocks/assignment/SpellCheck';
+  const SpellCheck = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SpellCheck');
 
   export default {
     props: ['value'],

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: {

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -43,10 +43,11 @@
 </template>
 
 <script>
-  import SubmissionInput from '@/components/content-blocks/assignment/SubmissionInput';
+  const SubmissionInput = () => import('@/components/content-blocks/assignment/SubmissionInput');
-  import FinalSubmission from '@/components/content-blocks/assignment/FinalSubmission';
+  const FinalSubmission = () => import('@/components/content-blocks/assignment/FinalSubmission');
-  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
+  const FileUpload = () => import('@/components/ui/file-upload/FileUpload');
-  import FileUpload from '@/components/ui/file-upload/FileUpload';
+
+  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
 
   export default {
     props: {

client/src/components/content-blocks/assignment/SubmissionInput.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script>
-  import TickCircleIcon from '@/components/icons/TickCircleIcon';
+  const TickCircleIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TickCircleIcon');
-  import LoadingIcon from '@/components/icons/LoadingIcon';
+  const LoadingIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/LoadingIcon');
 
   export default {
     props: {

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'],

client/src/components/content-forms/ContentBlockElementChooserWidget.vue

@@ -49,12 +49,12 @@
 </template>
 
 <script>
-  import LinkIcon from '@/components/icons/LinkIcon';
+  const LinkIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon');
-  import VideoIcon from '@/components/icons/VideoIcon';
+  const VideoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/VideoIcon');
-  import ImageIcon from '@/components/icons/ImageIcon';
+  const ImageIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ImageIcon');
-  import TextIcon from '@/components/icons/TextIcon';
+  const TextIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TextIcon');
-  import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
+  const SpeechBubbleIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/SpeechBubbleIcon');
-  import DocumentIcon from '@/components/icons/DocumentIcon';
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
 
   export default {
     props: {

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'],
 

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'],

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: {

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: {

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: {

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'],

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},

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},

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: {

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'],

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: {

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: {

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'],

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: {

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'],

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: {

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: {

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 {
 

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'],

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: {

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: {

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'],

client/src/components/rooms/RoomVisibilityWidget.vue

@@ -14,8 +14,8 @@
 
 <script>
 
-  import EyeIcon from '@/components/icons/EyeIcon';
+  const EyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon');
-  import ClosedEyeIcon from '@/components/icons/ClosedEyeIcon';
+  const ClosedEyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ClosedEyeIcon');
 
   export default {
     props: {

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: {

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 {
 

client/src/components/ui/BaseInput.vue

@@ -26,8 +26,8 @@
 </template>
 
 <script>
-  import Tick from '@/components/icons/Tick';
+  const Tick = () => import(/* webpackChunkName: "icons" */'@/components/icons/Tick');
-  import CircleIcon from '@/components/icons/CircleIcon';
+  const CircleIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/CircleIcon');
 
   export default {
     props: {

client/src/components/ui/ButtonWithIconAndText.vue

@@ -8,8 +8,8 @@
 </template>
 
 <script>
-  import DocumentIcon from '@/components/icons/DocumentIcon';
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
-  import DocumentWithLinesIcon from '@/components/icons/DocumentWithLinesIcon';
+  const DocumentWithLinesIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentWithLinesIcon');
 
   export default {
     props: {

client/src/components/ui/PopoverLink.vue

@@ -14,9 +14,9 @@
 </template>
 
 <script>
-  import EyeIcon from '@/components/icons/EyeIcon';
+  const EyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon');
-  import TrashIcon from '@/components/icons/TrashIcon';
+  const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
-  import PenIcon from '@/components/icons/PenIcon';
+  const PenIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon');
 
   export default {
     props: {

client/src/components/ui/file-upload/FileUpload.vue

@@ -21,8 +21,8 @@
 </template>
 
 <script>
-  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
+  const SimpleFileUpload = () => import('@/components/ui/file-upload/SimpleFileUpload');
-  import SimpleFileUpload from '@/components/ui/file-upload/SimpleFileUpload';
+  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
 
   export default {
     props: {

client/src/components/ui/file-upload/SimpleFileUpload.vue

@@ -9,10 +9,10 @@
 
 <script>
 
-  import DocumentIcon from '@/components/icons/DocumentIcon';
+  const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput');
-  import SimpleFileUploadHiddenInput from '@/components/ui/file-upload/SimpleFileUploadHiddenInput';
+  const SimpleFileUploadIcon = () => import('@/components/ui/file-upload/SimpleFileUploadIcon');
-  import SimpleFileUploadIcon from '@/components/ui/file-upload/SimpleFileUploadIcon';
+  const SimpleFileUploadIconAndText = () => import('@/components/ui/file-upload/SimpleFileUploadIconAndText');
-  import SimpleFileUploadIconAndText from '@/components/ui/file-upload/SimpleFileUploadIconAndText';
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
 
   export default {
     props: {

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},

client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue

@@ -11,9 +11,9 @@
 </template>
 
 <script>
-  import DocumentIcon from '@/components/icons/DocumentIcon';
+  const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput');
-  import SimpleFileUploadHiddenInput from '@/components/ui/file-upload/SimpleFileUploadHiddenInput';
+  const ButtonWithIconAndText = () => import('@/components/ui/ButtonWithIconAndText');
-  import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
 
   export default {
     props: ['value'],

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: {

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, {
-  const uploadcarePanel = uploadcareWidget.openPanel(component.$refs['uploadcare-panel'], null, {
+      tabs: ['file'],
-    tabs: ['file'],
+    });
-  });
 
-  // HACK to change the text of the Uploadcare dynamically we need to change the text here directly
+    // HACK to change the text of the Uploadcare dynamically we need to change the text here directly
-  setTimeout(() => {
+    setTimeout(() => {
-    const formElem = component.$refs['documentform'];
+      const formElem = component.$refs['documentform'];
-    if (formElem.getElementsByClassName('uploadcare--text_size_extra-large').length > 1) {
+      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--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';
+        formElem.getElementsByClassName('uploadcare--tab__action-button')[0].innerText = 'Wählen Sie ein lokales Dokument';
-    }
+      }
-  }, 0);
+    }, 0);
 
-  return uploadcarePanel.done(panelResult => {
+    return uploadcarePanel.done(panelResult => {
-    panelResult.done(fileInfo => {
+      panelResult.done(fileInfo => {
-      let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
+        let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
-      callback(urlWithFilename);
+        callback(urlWithFilename);
+      });
     });
   });
-};

client/src/layouts/DefaultFooter.vue

@@ -49,8 +49,8 @@
 </template>
 
 <script>
-  import HepLogo from '@/components/icons/HepLogo';
+  const HepLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogo');
-  import EhbLogo from '@/components/icons/EhbLogo';
+  const EhbLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo');
 
   export default {
     components: {

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: {

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: {

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: {

client/src/layouts/SplitLayout.vue

@@ -10,10 +10,10 @@
 </template>
 
 <script>
-  const ContentsIllustration = () => import('@/components/illustrations/ContentsIllustration');
+  const ContentsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/ContentsIllustration');
-  const PortfolioIllustration = () => import('@/components/illustrations/PortfolioIllustration');
+  const PortfolioIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration');
-  const RoomsIllustration = () => import('@/components/illustrations/RoomsIllustration');
+  const RoomsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration');
-  const HelloIllustration = () => import('@/components/illustrations/HelloIllustration');
+  const HelloIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/HelloIllustration');
 
   export default {
     components: {

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: {

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';
+  const HepLogoNoClaim = () => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogoNoClaim');
-  import EhbLogo from '@/components/icons/EhbLogo';
+  const EhbLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo');
-  import Logo from '@/components/icons/Logo';
+  const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
-  const HelloIllustration = () => import('@/components/illustrations/HelloIllustration');
+  const HelloIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/HelloIllustration');
 
   export default {
     mixins: [pageTitleMixin],

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: {

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],

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],

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'],

client/src/pages/start-old.vue

@@ -63,9 +63,9 @@
 
   import meMixin from '@/mixins/me';
 
-  const ContentsIllustration = () => import('@/components/illustrations/ContentsIllustration');
+  const ContentsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/ContentsIllustration');
-  const PortfolioIllustration = () => import('@/components/illustrations/PortfolioIllustration');
+  const PortfolioIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration');
-  const RoomsIllustration = () => import('@/components/illustrations/RoomsIllustration');
+  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";
 

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],

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;
 

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 {
 

client/src/router/auth.routes.js

@@ -1,9 +1,9 @@
 import {LICENSE_ACTIVATION} from '@/router/auth.names';
 
-const hello = () => import('@/pages/hello');
+const hello = () => import(/* webpackChunkName: "auth" */'@/pages/hello');
-const betaLogin = () => import('@/pages/beta-login');
+const betaLogin = () => import(/* webpackChunkName: "auth" */'@/pages/beta-login');
-const loginError = () => import('@/pages/login-error');
+const loginError = () => import(/* webpackChunkName: "auth" */'@/pages/login-error');
-const licenseActivation = () => import('@/pages/license-activation');
+const licenseActivation = () => import(/* webpackChunkName: "auth" */'@/pages/license-activation');
 
 export default [
   {

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');
 

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 profilePage = () => import(/* webpackChunkName: "profile" */'@/pages/profile');
-const profile = () => import('@/components/profile/Profile');
+const profile = () => import(/* webpackChunkName: "profile" */'@/components/profile/Profile');
-const myClass = () => import('@/pages/myClass');
+const myClass = () => import(/* webpackChunkName: "profile" */'@/pages/myClass');
-const activity = () => import('@/pages/activity');
+const activity = () => import(/* webpackChunkName: "profile" */'@/pages/activity');
-const oldClasses = () => import('@/pages/oldClasses');
+const oldClasses = () => import(/* webpackChunkName: "profile" */'@/pages/oldClasses');
-const createClass = () => import('@/pages/createClass');
+const createClass = () => import(/* webpackChunkName: "profile" */'@/pages/createClass');
-const showSchoolClassCode = () => import('@/pages/me/showSchoolClassCode');
+const showSchoolClassCode = () => import(/* webpackChunkName: "profile" */'@/pages/me/showSchoolClassCode');
-const showTeamCode = () => import('@/pages/me/showTeamCode');
+const showTeamCode = () => import(/* webpackChunkName: "profile" */'@/pages/me/showTeamCode');
-const myTeam = () => import('@/pages/me/myTeam');
+const myTeam = () => import(/* webpackChunkName: "profile" */'@/pages/me/myTeam');
-const joinTeam = () => import('@/pages/me/joinTeam');
+const joinTeam = () => import(/* webpackChunkName: "profile" */'@/pages/me/joinTeam');
-const createTeam = () => import('@/pages/me/createTeam');
+const createTeam = () => import(/* webpackChunkName: "profile" */'@/pages/me/createTeam');
 
 export default [
   {

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 moduleBase = () => import(/* webpackChunkName: "modules" */'@/pages/module/module-base');
-const module = () => import('@/pages/module/module');
+const module = () => import(/* webpackChunkName: "modules" */'@/pages/module/module');
-const submissions = () => import('@/pages/submissions');
+const submissions = () => import(/* webpackChunkName: "modules" */'@/pages/submissions');
-const moduleVisibility = () => import('@/pages/module/moduleVisibility');
+const moduleVisibility = () => import(/* webpackChunkName: "modules" */'@/pages/module/moduleVisibility');
-const settingsPage = () => import('@/pages/module/moduleSettings');
+const settingsPage = () => import(/* webpackChunkName: "modules" */'@/pages/module/moduleSettings');
-const snapshots = () => import('@/pages/snapshot/snapshots');
+const snapshots = () => import(/* webpackChunkName: "modules" */'@/pages/snapshot/snapshots');
-const snapshot = () => import('@/pages/snapshot/snapshot');
+const snapshot = () => import(/* webpackChunkName: "modules" */'@/pages/snapshot/snapshot');
 
 export default [
   {

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 onboarding = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding');
-const onboardingStart = () => import('@/pages/onboarding/start');
+const onboardingStart = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/start');
-const onboardingStep1 = () => import('@/pages/onboarding/step1');
+const onboardingStep1 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step1');
-const onboardingStep2 = () => import('@/pages/onboarding/step2');
+const onboardingStep2 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step2');
-const onboardingStep3 = () => import('@/pages/onboarding/step3');
+const onboardingStep3 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step3');
 
 export default [
   {

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 portfolio = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/portfolio');
-const project = () => import('@/pages/portfolio/project');
+const project = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/project');
-const newProject = () => import('@/pages/portfolio/newProject');
+const newProject = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/newProject');
-const editProject = () => import('@/pages/portfolio/editProject');
+const editProject = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/editProject');
 
 const portfolioRoutes = [
   {path: '/portfolio', name: PROJECTS_PAGE, component: portfolio, meta: {hideFooter: true}},

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 rooms = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms');
-const newRoom = () => import('@/pages/newRoom');
+const newRoom = () => import(/* webpackChunkName: "rooms" */'@/pages/newRoom');
-const editRoom = () => import('@/pages/editRoom');
+const editRoom = () => import(/* webpackChunkName: "rooms" */'@/pages/editRoom');
-const room = () => import('@/pages/room');
+const room = () => import(/* webpackChunkName: "rooms" */'@/pages/room');
-const moduleRoom = () => import('@/pages/module/moduleRoom');
+const moduleRoom = () => import(/* webpackChunkName: "rooms" */'@/pages/module/moduleRoom');
 
 export default [
   {path: '/rooms', name: ROOMS_PAGE, component: rooms, meta: {filter: true, hideFooter: true}},