Webpack Vue 2-按需导入

我使用components按钮并为每个人选择，但我只在admin页面使用Table和Form按钮。 管理部分是一个Vue组件，包括其他组件

问题是。既然我想通过Webpack优化bundle build的大小，我如何导入导入按钮并在默认情况下选择，但如果您访问管理部分，如何选择Table和Form

我想我需要在网页包中有多个块，但我不知道如何做

---

谢谢你

你说得对，你需要把你的文件分成几个部分。你应该看一看

这样，您将能够在组件级别管理依赖关系

---

如果您觉得使用收费比自动配置（几乎）您所需的一切都更方便，那么这就是您所需要的工具。

我只是在Vue路由器文档中遗漏了这一点

import Vue from 'vue'

import { 
         Button, 
         Select,
         Table,
         Form, 
        } from 'element-ui'


import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

// Used by admin section of the website
Vue.component(Table.name, Table)
Vue.component(Form.name, Form)

const routes = [
    { path: '/', component: Home },
    { path: '/admin', meta: { requiresAuth: true }, component: Admin},
];

new Vue({
  el: '#app',
  render: h => h(App)
})

---

实际上，我使用的是单文件组件结构，但Webpack生成的包只生成一个app.js，并在开始时加载。此文件包含仅在“管理”部分使用的组件，我希望避免这种情况。因此，您不应该在主文件中创建组件，而应该像从“path/toTable”导入表一样导入它们，这样你就可以管理你的依赖关系了。我做到了，但现在即使导入是本地的，我的包大小也不会改变。仅当我是管理员而不是普通用户时，我才想从“./components/Admin/Admin.vue”导入管理员。这可能会解决您的问题>

const Foo = resolve => {
  // require.ensure is Webpack's special syntax for a code-split point.
  require.ensure(['./Foo.vue'], () => {
    resolve(require('./Foo.vue'))
  })
}