Vue.js Production Deployment: Best Practices and Configuration

The Vue CLI already has most of the tips below enabled by default, this section is relevant only if you are using a custom build setup.

Turn on Production Mode

When we are developing, Vue provides us with lots of warnings to help us with common errors and pitfalls. However, these warning strings are useless in production and will bloat our app's payload size. Additionally, some of these warning checks have small runtime costs that we can avoid in production mode.

Without Build Tools

If we are using the full build i.e including Vue directly using the script tag without using a build tool, we should make sure we use the minified version (vue.min.js) for production.

With Build Tools

When using build tools like Browserify or Webpack, the production mode is determined by process.env.NODE_ENV inside Vue's source code, this is in development mode by default. Both build tools provide ways for us to overwrite this variable to enable Vue's production mode, and warnings will be stripped by the minifiers during the build. All vue-cli templates have these pre-configured for us. However, it would be beneficial to know how it is done:

Webpack

In Webpack 4+, we can use the mode option:

module.exports = {
  mode: 'production'
}

However, in Webpack 3 and earlier, versions we'll need to use DefinePlugin:

var webpack = require('webpack')
module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

Browserify

• We can run the bundling command with the actual NODE_ENV environment variable set to "production". This will instruct vueify to avoid including hot-reload and development related code.
• Then apply a global envify transform to your bundle. This will allow the minifier to strip out all the warnings in Vue's source code wrapped in env variable conditional blocks. For example:

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

Or, we can use envify with Gulp:

// we uUse the envify custom module to specify environment variables
var envify = require('envify/custom')

browserify(browserifyOptions)
  .transform(vueify)
  .transform(
    // Required in order to process node_modules files
    { global: true },
    envify({ NODE_ENV: 'production' })
  )
  .bundle()
Or, using envify with grunt-browserify and Grunt:

// we use the envify custom module to specify environment variables
var envify = require('envify/custom')

browserify: {
  dist: {
    options: {
      // A Function to deviate from grunt-browserify's default order
      configure: b => b
        .transform('vueify')
        .transform(
          // Thus is required in order to process node_modules files
          { global: true },
          envify({ NODE_ENV: 'production' })
        )
        .bundle()
    }
  }
}

Rollup

We use rollup-plugin-replace:

const replace = require('rollup-plugin-replace')
rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'production' )
    })
  ]
}).then(...)

Pre-Compiling Templates

When we are using in-DOM templates or in-JavaScript template strings, the template-to-render-function compilation will be performed on the fly. In most cases, this is usually fast enough, but is best avoided if our application is performance-sensitive.

To pre-compile templates the easiest way is using Single-File Components - the associated build setups automatically perform pre-compilation for us, so the built code will contain the already compiled render functions instead of raw template strings.

If we are using Webpack, and prefer to separate JavaScript and template files, we can use vue-template-loader, which will also transform the template files into JavaScript render functions during the build step.

Extracting Component CSS

When we are using Single-File Components, the CSS that are inside components are injected dynamically as <style> tags via JavaScript. Runtime cost of this is small, and if you are using server-side rendering this will cause a "flash of unstyled content". Extracting the CSS across all components into the same file will avoid these issues, and also result in better CSS minification and caching of our applications.

You should refer to the respective build tool documentations to see how it's done:

• Webpack + vue-loader (the vue-cli webpack template has this pre-configured)
• Browserify + vueify
• Rollup + rollup-plugin-vue

Tracking Runtime Errors

If a runtime error ever occurs during a component's render, it will be passed to the global Vue.config.errorHandler config function if it has been set. It could be a good idea to leverage this hook together with an error-tracking service like Sentry, this provides an official integration for Vue.

Previous: Vue.js TypeScript Support: Guide for Development and Tooling.
Next: Vue.js Routing: Setup, Configuration