performance build with vue

[Jogiter]

how to improve performance of f7

• http://framework7.io/docs/custom-build.html#es-modules: import with only components you need
• http://framework7.io/docs/custom-build.html#lessjs: import stylesheet with only components you need
• https://framework7.io/vue/navigation-router#async-lazy-components: load page components on demand
• vendor depend on swiper, make the vendor too big(gzip 1.78M): f7: 1.04M; f7-vue: 340k; vue 207k; swiper 159k;

[Jogiter]

lighthouse speed is slow!

• [ ] google-fonts slow down the speed
• [ ] framework7/css/bundle css is too big
• [x] dynamic load route pages. see navigation-router#async-lazy-components
• [x] import components as needed. see vue/init-app and framework7-vue#registerComponents
• [x] add rollup bundle analyze rollup-plugin-visualizer

perf

• dynamic import routes

• dynamic import component

import manually as your need

function registerComponents(app) {
  app.component('f7-accordion-content', f7AccordionContent);
  app.component('f7-accordion-item', f7AccordionItem);
  app.component('f7-accordion-toggle', f7AccordionToggle);
  app.component('f7-accordion', f7Accordion);
  app.component('f7-actions-button', f7ActionsButton);
  app.component('f7-actions-group', f7ActionsGroup);
  app.component('f7-actions-label', f7ActionsLabel);
  app.component('f7-actions', f7Actions);
  app.component('f7-app', f7App);
  app.component('f7-appbar', f7Appbar);
  app.component('f7-area-chart', f7AreaChart);
  app.component('f7-badge', f7Badge);
  app.component('f7-block-footer', f7BlockFooter);
  app.component('f7-block-header', f7BlockHeader);
  app.component('f7-block-title', f7BlockTitle);
  app.component('f7-block', f7Block);
  app.component('f7-button', f7Button);
  app.component('f7-card-content', f7CardContent);
  app.component('f7-card-footer', f7CardFooter);
  app.component('f7-card-header', f7CardHeader);
  app.component('f7-card', f7Card);
  app.component('f7-checkbox', f7Checkbox);
  app.component('f7-chip', f7Chip);
  app.component('f7-col', f7Col);
  app.component('f7-fab-backdrop', f7FabBackdrop);
  app.component('f7-fab-button', f7FabButton);
  app.component('f7-fab-buttons', f7FabButtons);
  app.component('f7-fab', f7Fab);
  app.component('f7-gauge', f7Gauge);
  app.component('f7-icon', f7Icon);
  app.component('f7-input', f7Input);
  app.component('f7-link', f7Link);
  app.component('f7-list-button', f7ListButton);
  app.component('f7-list-group', f7ListGroup);
  app.component('f7-list-index', f7ListIndex);
  app.component('f7-list-input', f7ListInput);
  app.component('f7-list-item-cell', f7ListItemCell);
  app.component('f7-list-item-row', f7ListItemRow);
  app.component('f7-list-item', f7ListItem);
  app.component('f7-list', f7List);
  app.component('f7-login-screen-title', f7LoginScreenTitle);
  app.component('f7-login-screen', f7LoginScreen);
  app.component('f7-menu-dropdown-item', f7MenuDropdownItem);
  app.component('f7-menu-dropdown', f7MenuDropdown);
  app.component('f7-menu-item', f7MenuItem);
  app.component('f7-menu', f7Menu);
  app.component('f7-message', f7Message);
  app.component('f7-messagebar-attachment', f7MessagebarAttachment);
  app.component('f7-messagebar-attachments', f7MessagebarAttachments);
  app.component('f7-messagebar-sheet-image', f7MessagebarSheetImage);
  app.component('f7-messagebar-sheet-item', f7MessagebarSheetItem);
  app.component('f7-messagebar-sheet', f7MessagebarSheet);
  app.component('f7-messagebar', f7Messagebar);
  app.component('f7-messages-title', f7MessagesTitle);
  app.component('f7-messages', f7Messages);
  app.component('f7-nav-left', f7NavLeft);
  app.component('f7-nav-right', f7NavRight);
  app.component('f7-nav-title-large', f7NavTitleLarge);
  app.component('f7-nav-title', f7NavTitle);
  app.component('f7-navbar', f7Navbar);
  app.component('f7-page-content', f7PageContent);
  app.component('f7-page', f7Page);
  app.component('f7-panel', f7Panel);
  app.component('f7-photo-browser', f7PhotoBrowser);
  app.component('f7-pie-chart', f7PieChart);
  app.component('f7-popover', f7Popover);
  app.component('f7-popup', f7Popup);
  app.component('f7-preloader', f7Preloader);
  app.component('f7-progressbar', f7Progressbar);
  app.component('f7-radio', f7Radio);
  app.component('f7-range', f7Range);
  app.component('f7-routable-modals', f7RoutableModals);
  app.component('f7-row', f7Row);
  app.component('f7-searchbar', f7Searchbar);
  app.component('f7-segmented', f7Segmented);
  app.component('f7-sheet', f7Sheet);
  app.component('f7-skeleton-avatar', f7SkeletonAvatar);
  app.component('f7-skeleton-block', f7SkeletonBlock);
  app.component('f7-skeleton-image', f7SkeletonImage);
  app.component('f7-skeleton-text', f7SkeletonText);
  app.component('f7-stepper', f7Stepper);
  app.component('f7-subnavbar', f7Subnavbar);
  app.component('f7-swipeout-actions', f7SwipeoutActions);
  app.component('f7-swipeout-button', f7SwipeoutButton);
  app.component('f7-swiper-slide', f7SwiperSlide);
  app.component('f7-swiper', f7Swiper);
  app.component('f7-tab', f7Tab);
  app.component('f7-tabs', f7Tabs);
  app.component('f7-text-editor', f7TextEditor);
  app.component('f7-toggle', f7Toggle);
  app.component('f7-toolbar', f7Toolbar);
  app.component('f7-treeview-item', f7TreeviewItem);
  app.component('f7-treeview', f7Treeview);
  app.component('f7-use-icon', f7UseIcon);
  app.component('f7-view', f7View);
  app.component('f7-views', f7Views)
}
export { registerComponents }

• rollup bundle