Vue cli 3.0 file compression remove console


Debugging information in Vue project console.log Automatic removal by packaging

I am here vue.config.js The configuration item of the file adds these lines of code

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = [ 'console.log' ]

Note: environment variables are used for control. This plug-in will be called for package optimization only when the production package is printed, because in the development environment config.optimization It’s undefined
Explanation: during the packaging process, vue-cli 3.0 uses the terser webpack plugin plug-in for optimization. The specific configuration can be node_ modules/@vue/cli-service/lib/config/ prod.js See that the specific configuration of terser webpack plugin is in the same folder terserOptions.js Add the above configuration items to the production environment

Like 10