使用没有捆绑器的Vue？

Question

我正在创建一些使用JavaScript而不捆绑的实验性网站。对于依赖关系管理我到目前为止使用过RequireJS，但我最近开始使用SystemJS，因为它对HTTP2有一些非常好的支持。到目前为止，我已经在我的自定义网络服务器上做了一些实验，结果非常适合我正在创建的网站。例如，第一页渲染发生在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编译成纯JS。

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

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

Answer 1

看来Async components和webpacks code splitting正是你要找的。

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

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

Answer 2

如果我正确理解了这个问题，那么你所需要的只是一个* .vue文件并返回一个编译的* .js文件。您可以尝试使用https://github.com/vuejs/vue-component-compiler编写自己的东西，或者我最终做的是误用汇总作为我的vue编译器，配置它，以便它忽略所有依赖项，因此需要一个vue组件并且只编译那个组件。在这里你可以看到实现它的配置：https://github.com/ecosia/bazel_rules_nodejs_contrib/blob/master/internal/vue_component/rollup.config.js

Answer 3

不，因为单个Vue文件（* .vue）只能由vue-loader通过webpack识别，SystemJS或AMD或CommonJS与它完全无关，这三个是模块化标准或使javascipts文件井井有条的方法。

你也可以这样写。

a.component.js

var ComponentA = {
    template: '#view-a',
}

b.component.js

var ComponentB = {
    template: '#view-b',
}

然后在你的html文件中

<script type="text/x-template" id="view-a">
    <div> .... </div>
</script>

<script type="text/x-template" id="view-b">
    <div> .... </div>
</script>