cklwblove / vue-cli3-template

:tada: 基于 vue-cli 搭建的前端模板

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

生产环境移除 console.log

cklwblove opened this issue · comments

  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,
};
  1. 使用 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'],
+            },
+          }
+        })
+      ],
+    },
+ })
...