Vue 2 - 按需导入

Question

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)
})

我正在为每个人使用组件 Button 和 Select，但我只为管理页面使用 Table 和 Form。管理部分是一个包含其他组件的 Vue 组件。

问题来了。因为我想优化 Webpack 构建的包的大小，我怎么能默认导入 import Button 和 Select，但是如果你到达管理部分，我怎么能导入 import Button 和 Table 和 Form？

我想我需要在 Webpack 中包含多个块，但我不确定该怎么做。

谢谢

Answer 1

你说得对，你需要将你的文件分成几个文件。你应该看看 single files component.

这样您就可以在组件级别管理您的依赖项。

如果您觉得自动配置（几乎）一切都适合您的通行费，vue-cli 是您需要的工具。

Answer 2

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

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

Vue 2 - 按需导入

Vue 2 - Import on demand

webpack

vue.js

webpack-2

vuejs2