• 需求:
    • vue项目打包时清除console.log()
  • 代码:
    • 在vue.config.js中,添加如下配置:
      chainWebpack(config) {
          config.optimization.minimizer('terser').tap((args) => {
            args[0].terserOptions.compress.drop_console = true
            return args
          })
      }
    • 说明:实际上这个配置会清除所有console对象的函数。
  • 解析:
    • 思路:
      • 对webpack打包时使用的插件terser进行配置,使其在打包时清除console对象的函数。
    • 溯源:
      • 在vue cli官网英文版(Migrating from v3 | Vue CLI)可以找到代码原文,但如果我们想继续分析,可以在vue cli官网中文版(webpack 相关 | Vue CLI)看到关于通过链式操作配置webpack的语法,继而我们来到webpack官网(Optimization | webpack 中文文档),继续从文档中找到了通过提供定制terser实例来配置压缩工具的语法,但我们不需要完全替换terser实例,只需要修改一个属性值——让他在打包的时候清除console的方法。于是我们来到了webpack官网中关于配置terser的文档,找到了关于配置中compress字段的内容,但文档中并未对其进行详细说明,所以我们又来到了github上terser插件的文档(GitHub - terser/terser: 🗜 JavaScript parser, mangler and compressor toolkit for ES6+),最终找到了terser插件配置中compress字段的drop_console属性的作用。
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐