How can I exclude vue2 from vue SPA created with cli, by using http-vue-loader?

55 views Asked by At

Background

I have a SPA application created with the vue-cli. To decrease server traffic, I'd like to exclude vue2 from the webpack bundle. So, I exclude Vue and Vuetify by config.externals of vue.config.js, and core-js by babel.js.

But still remained the vue-loader in the bundle as occupy the right third as follows:

enter image description here

I'd like to exclude this vue-loader.

My problem

I try to use http-vue-loader from CDN by adding the following script in the index.html file:

<script src="https://unpkg.com/http-vue-loader"></script>

And set it as externals as follow in the config.externals on the vue.config.js file as follows:

    config.externals({
      vue: 'Vue',
      vuetify: 'Vuetify',
      'vuetify/lib/framework': 'Vuetify',
      'httpVueLoader': 'httpVueLoader',
    })

Then I changed two places importing the vue file. The former is the main.js, which importing App.vue as follow:

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

I've changed it as follows:

import Vue from 'vue'
// import App from './App.vue'
import vuetify from './plugins/vuetify'

/*
new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')
*/

Vue.use(vuetify)

import httpVueLoader from "httpVueLoader";

new Vue({
  el: "#app",
  components: {
    App: httpVueLoader("./App.vue")
  }
});

The later is App.vue importing Home.vue as follows:

<script>

import Home from '@/views/Home.vue'
export default {
  name: 'App',

  components: {
    Home
  },

  data: () => ({
    //
  }),
};
</script>

I've changed it as follows:

<script>

//import Home from '@/views/Home.vue'
import httpVueLoader from "httpVueLoader";
const Home = httpVueLoader('/src/views/Home.vue')
export default {
  name: 'App',

  components: {
    Home
  },

  data: () => ({
    //
  }),
};
</script>

[HMR] Waiting for update signal from WDS...

After running test server by yarn serve and show on the browser, the page is just white and console shows that it is waiting as [HMR] Waiting for update signal from WDS...

enter image description here

My question

What is WDS signal? Why my app is waiting for this? How can I avoid this and my app running normally? Any suggestions are welcome.

Reproducing Environment

A simple reproducing environment is available as https://github.com/UedaTakeyuki/http-vue-loader.

0

There are 0 answers