vue-cli 生產模式去除 console.log

preface

最近項目接近尾聲， 開始着手項目加載優化操作，簡要如下：

1. 大的背景圖 進行了在線壓縮
2. 第三方引用的模塊使用 cdn引入， 如 vue, elementui ，echarts
3. 異步加載 頁面 和 某些 css 或者 js 比較大的模塊
4. …

vue-cli 如何 去除 console.log

去除 console 應屬於 webpack 插件 的事情，所以一定是需要更改webpack 的某些插件配置的

查看了 別人的 blog 修改 vue.config.js 中的configureWebpack來實現 需求

1. 看 vue-cli 官網

關於 webpack 的配置， 如下兩個方法可以是西安對 內部的webpack 配置進性修改

2. 找到 terser-webpack-plugin

通過別人的blog 瞭解到 vue-cli 使用 terser 對js 解析壓縮, 當然也可以去看看源碼

npm 搜索 terser 找到了 如下 地址 https://github.com/webpack-contrib/terser-webpack-plugin

3. webpak-chain api 操作

從 vue-cli 官網 跳轉到 https://github.com/neutrinojs/webpack-chain#getting-started webpak-chain api 操作

確認了 terser 需要通過 opitimiztion 修改, 按照如下官網案例修改。

4. terser 官方 github 找 compress配置

terser-webpack-plugin readMe 開始就 給了地址 This plugin uses terser to minify your JavaScript.

5. 最後配置如下

 chainWebpack: config => {
    config.optimization
      .minimizer('terser')
      .tap(args => {
        Object.assign(args[0].terserOptions.compress, { // 生產模式 console.log 去除
          // warnings: false , // 默認 false
          // drop_console:  ,
          // drop_debugger: true, // 默認也是true 
          pure_funcs: ['console.log']
        })
        return args
      })
  }