[分享]webpack不打包vue

现在的前端开发离不开webpack，一个用于打包 JavaScript 应用程序的静态模块打包器。Vue作为当今最流行的前端框架，也与webpack紧密相连。但有时您可能需要在项目中使用Vue但不需要...

现在的前端开发离不开webpack，一个用于打包 JavaScript 应用程序的静态模块打包器。Vue作为当今最流行的前端框架，也与webpack紧密相连。但有时您可能需要在项目中使用Vue但不需要打包Vue。那么如何做到呢？

首先，您需要了解两个概念- runtime-only 和 runtime-compiler。针对Vue的安装包，我们通常会下载一个完整版的Vue.js，或者下载一个运行时资源包。这两个版本分别被称为runtime-compiler和runtime-only。如果您使用的是单文件组件 (.vue 文件)，那么您需要使用 runtime-compiler 版本。而对于只使用Vue进行开发，而不需要编译模板的项目，您使用的是 runtime-only 版本即可。

//runtime-compiler
new Vue({
  template: '<div>{{ message }}</div>',
  data: {
    message: 'Hello Vue.js!'
  }
})

//runtime-only
new Vue({
  render: function (createElement) {
    return createElement('div', this.message)
  },
  data: {
    message: 'Hello Vue.js!'
  }
}) 

通过以上代码，我们可以清晰地看出两者的区别。之所以这么说，是因为尽管 runtime-only 版本比 runtime-compiler 版本轻量，但它依然需要 Vue 模板编译器的存在。那么，如果您不需要使用编译器，可以尝试 Vue 的 runtime-only 版本。

那么，如何使用 runtime-only 版本呢？您可以直接将 Vue.js 文件导入项目中。

<script src="./vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
  })
</script> 

上述代码将 Vue.js 文件直接引入到您的HTML文件中，并通过new Vue（）创建了一个 Vue 实例。这就是使用 runtime-only 版本将 Vue 引入项目中的最简单方式。当然，您还可以通过 ES6 的 import 语法或 node 的 require 语法，以形成复杂的项目，如下所示。

import Vue from 'vue/dist/vue.runtime.esm.js';
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
}) 

当您不需要使用Vue的编译能力时，使用runtime-only版本的Vue可以显著减少您的代码量并提高性能。即使您的项目并不需要编译器功能，使用 runtime-compiler 版本仍会创建编译器和运行时的Vue功能，从而增加您的项目体积并降低性能。

总的来说，使用 runtime-only 版本 Vue 是非常值得推荐的，虽然runtime-only的缺点是无法在单文件组件中使用，但如果您对性能和代码可读性有追求，那么使用runtime-only版本Vue将成为你的不二之选。