I want to keep the package size small for quicker load times for the users.

I'm refactoring a little ecom site. It has a admin/product management site. 99% of users will never see this side of things.

Should I make a seperate project for admin site? It means maintaining 2 projects It should mean less for each user.

Does it really matter that much?

CodePudding user response：

Does it really matter that much?

Nobody can answer this except yourself (or your client).

Statistically speaking, the more your website takes to load, the more users you lose. It's directly proportional.

Rather than making a separate app for admin side, you should consider lazy loading routes.

If you (or your client) decide the effort you put into splitting code is worth the gain in page load, here are a few things to consider:

1. Most of your .vue files have no significant impact on loading (unless they're huge). What matters most are the dependencies and the (server-side) data.
   In most cases, lazy-loading routes only makes a difference if you import dependencies in the .vue files. If you attach them to the app through main lazy loading routes won't make a visible difference.
   The good part is you can yarn build and inspect the resulting chunk file sizes at all times.
2. For every library/package you use, find out if it's code-splittable.
   For example, you should never use loadsh in a Vue project. Use lodash-es instead, which allows you to only import (therefore include in the final bundle) the functions you actually used from it.
   Note most UI frameworks (Bootstrap, Ionic, ElementUI, etc...) are code-splittable, although this means manually importing into every .vue file the exact components you use (as opposed to loading the entire lib in main).
   Last, but not least, some UI frameworks (e.g: Tailwind CSS) have built-in tools to only include in the compiled code the features/rulesets used by the project, resulting in significantly smaller bundles/chunks.

What's the cost?

• most likely, hours of development. In large projects, tens of hours

What's the gain?

• you split up the loading time across routes.
  Instead of users waiting to load the entire app, and all its dependencies when they first access it, they have a much smaller wait on first page load and then keep loading the missing deps as they change routes. In general, this is the desirable loading strategy.
• when you code-split dependencies (UI libs, lodash) you only load what's being used. The difference is not big but sometimes it's noticeable.

These loading times only affect first-time visitors, unless you specifically disabled caching. By default, on refresh, the app will be loaded from cache, which is instant, in most cases.

Alternatives?

• a genuinely funny/smart loader will go a long way, significantly reducing the number of users giving up on your website while it's loading.
  Important: you don't want the app/website loader to be part of the app. Typically it should be inlined in index.html and get replaced/removed by the app, once it mounts
• if your app's layout is fairly light and most of the loading time is due to loading data, you should:
  • use skeletons
  • use data loading indicators
  • split up data into smaller chunks (the aim is to only load what you need for rendering what fits the screen and only load the rest if the user needs it - e.g: scrolls)

If not obvious, there's a balance between the effort you put into loading optimisation and the actual improvements. The more you do it, the better you get at knowing when to stop doing it.

• a medium Vue app is anywhere between 0.5 and 3Mb. If you want to know how much is yours: yarn build and look at /dist
• use tools to study your target users; mobile users typically have slower/spottier connections
• Chrome comes equipped with throttling, for testing how the app behaves on slower connections, what renders first, etc...
  Most other browsers have similar tools.
• always optimise images; they are often a major contributor to long loading times; image loading optimisation is a fairly large subject, I won't cover it here. But keep in mind images are extremely important in e-comm. Maybe the most important: quality product images drive sales.

CodePudding user response：

You could use lazy loading of routes

Look into Vue router documentation on how to do that https://router.vuejs.org/guide/advanced/lazy-loading.html