生产环境移除 console.log

[cklwblove]

1. 使用 babel-plugin-transform-remove-console

• 安装命令：yarn add babel-plugin-transform-remove-console --dev
• 修改 babel.config.js

+ const plugins = [];

+ if (process.env.NODE_ENV === 'production') {
+  plugins.push('transform-remove-console');
+ }

module.exports = {
  presets: ['@vue/app'],
+  plugins,
};

2. 使用 terser-webpack-plugin
   主要是 vue.config.js的修改

• 引入插件
  const TerserPlugin = require('terser-webpack-plugin');
• configureWebpack配置的修改

...
configureWebpack: () => ({
+ optimization: {
+      // https://webpack.docschina.org/configuration/optimization/#optimization-minimizer
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+            compress: {
+              warnings: false,
+              drop_console: true,
+              drop_debugger: true,
+              pure_funcs: ['console.log'],
+            },
+          }
+        })
+      ],
+    },
+ })
...