Production environment deployment


Most of the following are enabled by default when you use Vue CLI. This section is only relevant for your custom build settings.


Directory

  • ##Enable production environment mode

    • Without using build tools

    • Using build tools

  • Template pre-compilation

  • Extract the CSS of the component

  • Trace runtime errors


##Enable production environment mode

In the development environment, Vue will provide many warnings to help you deal with common errors and traps. In a production environment, these warning statements are useless, but will increase the size of the application. Additionally, some warning checks have a small runtime overhead that can be avoided in production mode.



Do not use build toolsIf you use the complete independent version of Vue, use it directly The

<script>

element is introduced into Vue without building it in advance. Please remember to use the compressed version (vue.min.js) in the production environment. Both versions can be found in the Installation Guide.


Using build toolsWhen using build tools like webpack or Browserify, the Vue source code will Determine whether to enable the production environment mode according to

process.env.NODE_ENV

. The default is the development environment mode. There are methods in webpack and Browserify to override this variable to enable Vue's production environment mode. At the same time, warning statements will also be removed by the compression tool during the build process. All of this is pre-configured in the vue-cli template, but it would be nice to know how to configure it.

webpack

In webpack 4, you can use the

mode

option: 

module.exports = {
  mode: 'production'
}
But in webpack 3 and above In lower versions, you need to use

DefinePlugin

: 

var webpack = require('webpack')

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

Browserify

    when running the packaging command. NODE_ENV
  • is set to

    "production". This is equivalent to telling vueify to avoid introducing hot reloading and development-related code.

  • Perform a global envify conversion on the packaged file. This allows the compression tool to remove all warning statements wrapped in environment variable conditions in the Vue source code. For example: 

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
// 使用 envify 的自定义模块来定制环境变量var envify = require('envify/custom')

browserify(browserifyOptions)
  .transform(vueify)
  .transform(    // 必填项，以处理 node_modules 里的文件
    { global: true },
    envify({ NODE_ENV: 'production' })
  )
  .bundle()
// 使用 envify 自定义模块指定环境变量var envify = require('envify/custom')

browserify: {  dist: {    options: {
        // 该函数用来调整 grunt-browserify 的默认指令
        configure: b => b
        .transform('vueify')
        .transform(
            // 用来处理 `node_modules` 文件
          { global: true },
          envify({ NODE_ENV: 'production' })
        )
        .bundle()
    }
  }
}

Rollup

Use rollup-plugin-replace: 

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


##Template precompilation

When using templates within the DOM or string templates within JavaScript, the template will be compiled into a rendering function at runtime. Usually this process is fast enough, but performance-sensitive applications are best to avoid this usage.

The easiest way to precompile templates is to use

Single file components - the relevant build settings will automatically handle precompilation, so the built code already contains the compiled rendering function instead of the original template string.

If you use webpack and like to separate JavaScript and template files, you can use

vue-template-loader, which can also convert template files into JavaScript rendering functions during the build process.


Extract the CSS of the component

When using a single file component, the CSS is dynamically injected via JavaScript in the form of

<style> tags. This has some small runtime overhead, and if you use server-side rendering, it can cause a period of "unstyled content flickering (fouc)". Extracting the CSS for all components into the same file avoids this problem and also allows the CSS to be minified and cached better.

Check out the respective documentation for this build tool to learn more:

  • webpack vue-loader (vue-cli The webpack template has been pre-configured)

  • Browserify vueify

  • ##Rollup rollup-plugin-vue

Tracking runtime errors

#If a runtime error occurs when the component is rendered, the error will be passed to the globalVue.config .errorHandler Configuration function (if set). It's a good idea to use this hook function with an error tracking service. For example Sentry, which provides official integration for Vue.