VueJS 2.0组件导入最佳实践咨询：全局与局部导入优劣对比

Hey there! As someone who's worked with Vue for years, I totally get your confusion around component imports—let's break this down clearly so you can make the best call for your project.

Local Component Imports (What Your Template Example Uses) #

First, let's recap what this approach looks like: you import the component directly inside every view or parent component that needs it, then declare it in the components option. Here's a quick example:

<template>
  <MySharedComponent />
</template>

<script>
import MySharedComponent from '@/components/MySharedComponent.vue'

export default {
  components: {
    MySharedComponent
  }
}
</script>

Pros #

• Clear dependency tracking: Anyone reading your component code can immediately see which child components it relies on—super helpful for maintenance and onboarding new devs.
• Optimal tree-shaking: If a view isn't used (like in lazy-loaded routes), the components imported only by that view won't end up in your final bundle. This keeps your app's overall size smaller.
• No naming conflicts: Local components are scoped to their parent, so you don't have to worry about accidentally overwriting a component with the same name elsewhere.

Cons #

• Repetitive code: If you use the same component across 5+ views, you'll end up writing the same import and components declaration over and over—tedious, to say the least.

Global Component Imports (What You're Considering) #

This approach involves registering your component once in your app's entry file (usually main.js) so it's available in every component without needing to import it again. Example:

// main.js
import Vue from 'vue'
import MySharedComponent from '@/components/MySharedComponent.vue'

Vue.component('MySharedComponent', MySharedComponent)

Pros #

• Write once, use anywhere: No more repeating import statements—just drop the component tag into any template and it works. Great for components you use constantly.
• Simpler workflow: For common UI elements (like buttons, inputs, or loading spinners), global registration cuts down on boilerplate and speeds up development.

Cons #

• Bigger initial bundle: Every globally registered component gets included in your app's initial chunk, even if some are never used on the first load. This can slow down your app's first render, especially if you register large components or lots of them.
• Ambiguous dependencies: When looking at a single component's code, you can't tell which global components it uses—this can make debugging and maintenance harder down the line.
• Naming collision risk: If you register two components with the same name globally, the later one will overwrite the former. Tracking down this kind of bug can be a headache.

Best Practices to Balance Convenience and Performance #

There's no one-size-fits-all answer, but here's what I recommend:

• Go global for truly universal components: Reserve global registration for components you use across nearly every view—think navigation bars, footers, basic UI buttons, or alert messages. These are usually small, so they won't tank your initial load time.
• Stick to local imports for view-specific components: If a component only appears in one or two views (like a user table for your admin dashboard, or a cart summary for your checkout page), import it locally. This ensures it only gets bundled when needed.
• Try async global registration for heavy components: If you have a large component you want to use globally but don't want to weigh down the initial load, register it asynchronously. It will only load when it's first used:

  // main.js
  Vue.component('MyHeavyGlobalComponent', () => import('@/components/MyHeavyGlobalComponent.vue'))
  

• Use library-specific loaders for UI frameworks: If you're using a component library like Element UI or Ant Design Vue, use their official on-demand loading plugins. This lets you use components globally without bundling the entire library.

At the end of the day, it's all about balancing development speed with app performance. Start with these guidelines, and adjust as your project grows!

内容的提问来源于stack exchange，提问作者Juanjo Román