vue打包上线利用插件去除 console

开发阶段,我们会编写大量的 console 语句用于测试

使用 build 命令打包时,会作为警告提出,因为上线之后,这些 console 语句是没有任何作用的,所以警告你应该移除

挨个文件手动删除的方法,会有两个问题

耗时耗力

代码中其实还是需要console的,只是打包后,希望生成的文件中不包含而已

解决的办法比较多

  1. babel-plugin-transform-remove-console
    比较流行的解决办法是使用 babel 的一个插件,因为webpack 打包时会使用 babel 进行代码降级,所以babel 插件可以在打包过程中,将 console 移除

npm 中搜索 babel-plugin-transform-remove-console,按照说明操作即可

1、安装

npm install babel-plugin-transform-remove-console --save-dev

2、配置

在项目根目录下的 babel.config 文件中加入如下代码
vue打包上线利用插件去除 console_第1张图片
再次运行 npm run build 命令,就不会有此类型的警告了

  1. terser-webpack-plugin
    安装
npm install terser-webpack-plugin --save-dev

项目根目录下新建 webpack.config.js,注册此插件

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

重新编译打包就OK了

  1. 问题
    使用 babel-plugin-transform-remove-console 插件会有一个问题(使用terser-webpack-plugin没有此问题),就是一旦安装并配置好后,无论运行
npm run build

还是运行

npm run serve

都会删除 console,语句

因为我们开发阶段都是使用 serve 命令启动的,所以导致开发阶段我们所有的console 语句都消失了

解决办法就是明确告诉此插件当前是开发环境还是生产环境

修改 babel.config.js 中的代码

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}
 
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [...prodPlugins]
}

此时,只有在生产环境下,才会去除 console

你可能感兴趣的:(vue.js,vue.js,webpack,javascript)