Vue Cli3 How to package configuration and automatically ignore statements

Download the plugin

npm i -D uglifyjs-webpack-plugin

Introduced to use

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 = {
 configureWebpack: {
  plugins: [
   new UglifyJsPlugin({
    uglifyOptions: {
     compress: {
      drop_console: true,
     },
    },
   }),
  ],
 },
 devServer: {
  proxy: {
   '/xxx': {
    target: 'http://192.168.150.17:8080/',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
     '^/xxx': 'xxx',
    },
   },
  },
 },
 publicPath: './',
}

Execute this time npm run build There is no file after package The statement has come.

However, there will be a problem at this time, that is, the compilation will be very slow in the development environment. For example, after modifying the value of a variable, my computer needs to compile for 10 seconds before re-swiping the page, and it keeps stuck92% chunk asset optimization。

Because it is removed The statement function is only required when packaged, so we can add a judgment to add the above configuration code only in the production environment.

So the correct configuration is as follows:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const config = {
 devServer: {
  proxy: {
   '/xxx': {
    target: 'http://192.168.150.17:8080/',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
     '^/xxx': 'xxx',
    },
   },
  },
 },
 publicPath: './',
}

if (.NODE_ENV === 'production') {
  = {
  plugins: [
   new UglifyJsPlugin({
    uglifyOptions: {
     compress: {
      drop_console: true,
     },
    },
   }),
  ],
 }
}

 = config

vue-cli3.0 production package removal

How to remove without installing plug-ins

During the packaging process, vue-cli3.0 uses the terser-webpack-plugin plugin for optimization. The specific configuration can be seen in node_modules/@vue/cli-service/lib/config/.

Environment variables are used here for control. This plug-in will be called for packaging and optimization only when the production package is put into production.

The specific configuration of terser-webpack-plugin is in the same folder. Just add the following properties to the compress object in this file.

warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['']

This is the end of this article about how to package Vue Cli3 and automatically ignore statements. For more information about Vue Cli3 and ignore content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!