bundling Vue css and js into a single outputĀ file

By default, vue-cli 3 will output three javascript or css files when building for production with npm run build:

dist/js/chunk-vendors.*.js
dist/js/app.*.js
dist/css/app.*.css

This is a reasonable default, because:

  1. Splitting application and vendor javascript improves cache hit rates, since code from "vendors" (libraries you use) tends to be both larger and change less often than your own application code.
  2. Loading javascript and css as separate resources allows browsers to fetch them in parallel.

But it may not be what you want, especially when writing a library or component to be used by others, and you want to make it easy for users import a single file instead of three.

merging vendor and app js

From the Vue configuration file, tell webpack to only output a single javascript bundle, by not splitting chunks:

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: false
    }
  }
}

Note that this file doesn't exist by default, you'll need to create it in the root of your vue-cli project if you haven't already.

inlining css into bundle js

Out-of-the-box, webpack copies compiled CSS into the output js file, which at runtime is then appended to the DOM. To get this behavior back, we need to tell Vue to not extract CSS:

// vue.config.js
module.exports = {
  css: {
    extract: false,
  },
}

If you add both options to your vue config, and then run npm run build once again, you should see only a single output javascript file:

dist/js/app.*.js