Vue.js build and deploy to single file

user_1458452 0
Viewed 5563

I have a Vue.js application which I created from webpack and when I build (npm run build), it creates a 'dist' folder with static/css and static/js folders respectively. I get

  • app.12345.js*
  • app.12345.map
  • manifest.556.js*
  • manifest.556.js.map
  • vendor.991.js*
  • vendor.991.js.map

In the index.html it produces, it only seems to be using the files marked with an asterisk (*). My question is, is there a way to condense these 3 into one file so I only need to reference one file in my index page? Like ~/myApp.js? I've read about chunking but I can't seem to get less than the 3 files listed.

vue.js webpack
3 Answers
module.exports = {
  css: {
    extract: false,
  },
  configureWebpack: {
    optimization: {
      splitChunks: false
    }
  },
}

filename: vue.config.js (root folder)

user_34875790

The question is : why would you wanna do this ? This is only for less codes, but if the project grows bigger, loading one file takes longer than three separated files.

user_101962360

You can, but you shouldn't.

The point of this separation is to reduce load times and bandwidth usage when you make updates to the application. Infrequently changing things - Vue, libraries like Bootstrap, etc. - go in the vendor file, whereas frequently changing items go in the main JS file. That way, making a minor tweak in your app only requires the user to re-download the app's files (which are usually quite small, filesize-wise) and not all the big libraries it uses.

This is likely managed by the CommonsChunkPlugin in your Webpack config.

ceejayoz_19020100
Related