在没有打包器的情况下使用 Vue？

Question

我正在创建一些使用 JavaScript 而没有捆绑的实验性网站。对于依赖管理，我一直使用 RequireJS，但最近我开始使用 SystemJS，因为它对 HTTP2 有一些非常好的支持。到目前为止，我已经在我的自定义 Web 服务器上做了一些实验，结果对于我创建的网站来说非常棒。例如，第一页渲染发生在 400 毫秒左右，整页加载发生在 800 毫秒等。

我这样做是因为我想充分利用 HTTP2 并且我只想延迟加载我在某个时刻使用的脚本。像这样的代码更容易维护，缓存更好等等。目前对像 Webpack 这样的打包器非常狂热，但这不是我想要使用的东西。

这里的问题是：有没有办法使用 Gulp 编译单个 Vue 文件/组件，然后使用 SystemJS 作为 AMD 或 CommonJS 模块加载它们？

编辑：

这就是我想用 SystemJS 和 Vue 实现的目标：

入口点JS文件：

// SystemJS config
SystemJS.config({
  /* ... */
  
  baseURL: './',
  map: {
    // App
    'app': 'scripts/app.min.js',
  
    // Utils
    'axios': 'scripts/vendor/axios/axios.min.js',
    'modernizr': 'scripts/vendor/modernizr/modernizr.min.js',    
  
    // Framework
    'vue': 'scripts/vendor/vue/vue.min.js',
    
    // Components
    'vueHelloWorld': 'scripts/components/hello/vueHelloWorld.js', // <- Compiled VUE component
    'vueMenu': 'scripts/components/menu/vueMenu.js'
  },
  depcache: {
    'vueHelloWorld': ['vue'],
    'vueMenu': ['vue', 'vueHelloWorld']
  }
  
  /* ... */
)};

// Initially Load default scripts
require(['modernizr', 'axios', 'app']);

Vue 组件vueHelloWorld.js和vueMenu.js最终结果，从单个文件模板vueHelloWorld.vue和vueMenu.vue.

在该初始文件app.min.js被加载之后，它将具有加载渲染的 vue 组件的声明。

这是我不知道该怎么做 - 如何为我想以这种方式加载的每个 Vue 组件呈现单独的文件？

Answer 1

看来异步组件和webpacks 代码分割正是您所寻找的。

您可以在这里找到一篇有关使用它们的文章：

https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/