vue-cli3 -- build 生产打包时自动清除console调试信息

生产环境去除console.log及代码压缩

最新推荐文章于 2025-03-11 11:23:14 发布

原创最新推荐文章于 2025-03-11 11:23:14 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

15 篇文章

订阅专栏

vue

10 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍如何在生产环境中使用Babel和Webpack插件去除console.log日志，并通过TerserWebpackPlugin进行代码压缩，以减少应用体积，提高加载速度。

方法

1. 安装`babel-plugin-transform-remove-console`

修改 babel.config.js 文件

推荐

let transformRemoveConsolePlugin = []
if (process.env.NODE_ENV === 'production') {
  transformRemoveConsolePlugin = ['transform-remove-console']
}

module.exports = {
  plugins: [
    ...transformRemoveConsolePlugin
  ]
}

2.安装`terser-webpack-plugin`

修改 babel.config.js 文件

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack: config => {
    config
      .optimization = {
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              compress: {
                drop_console: true
              }
            }
          })
        ]
      }
  }
}