element ui 为什么在组件里面引入

Question

element-ui 按需加载，为什么不在组件里面引入

这样是不是只有用户点击到这个页面，使用了这个组件才会加载element-ui tab组件的代码？？？？？

如：
tabTest.vue

<script>
import { Tabs, TabPane } from 'element-ui';
export default {
  components: {
     ElTabs: Tabs,
     ElTabPane: TabPane,
  },
};
</script>

官方的用法是直接加载所有用到的组件，也是按需的，是不是所有代码都打包到主文件里面去了？？？？？

Answer 1

官方的按需加载，影响的是整个项目的打包体积。并不是你理解的“只有用户点击到这个页面，使用了这个组件才会加载element-ui tab组件的代码”（你这个意思应该叫动态加载）。

你用npm run build --report，可以看到打包后各模块占用的体积，下面图1是没有配置按需加载的，图2配了按需加载。
图1，是整个element-ui库都打包进去，element-ui占用体积较大。
图2，配了按需加载，只是把popper.js和input.js还有他们依赖的相关element模块打包进去，体积就小了很多。

（图是不同项目截的，不一定精确，但这比例能表达我的意思。拿旁边的iview和jquery作参考，就发现按需加载的element，只是把部分插件打包进去而已）
你自己可以试试，配置按需加载前后，用npm run build --report对比一下