zoukankan      html  css  js  c++  java
  • webpack生产环境保留某些console.log

    生产环境中部署js代码一般会去掉console.log(),一来大量console.log会影响性能,二来有可能引起安全问题。我们一般在webpack.prod.conf.js文件配置:

    new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: true,
              drop_debugger: true,
              drop_console: true
            }
          },
          sourceMap: config.build.productionSourceMap,
          parallel: os.cpus().length - 1
    }),
    

    通过以上配置,我们的代码上生产环境后确实不会再控制台打印任何东西了。但是,如果我们想保留一些确定的打印呢,类似于百度:

    在网上查得方法如下:

    Node环境下:

    global.console.log("UglifyJs won't remove me")
    

    Browser环境下:

    window.console.log("UglifyJs won't remove me")
    

    console.log清除原理浅析

    // node_modules/uglify-js/lib/compress.js
    
    // 传 drop_console: true
    if (compressor.option("drop_console")) {
                if (exp instanceof AST_PropAccess) {
                    var name = exp.expression;
                    while (name.expression) {
                        name = name.expression;
                    }
                    // 通过Babel生成AST语法树判断节点是否为 console
                    if (is_undeclared_ref(name) && name.name == "console") { // 没有对 X.console 这种AST节点进行判断,所以我们可以 window.console.log(1) 这么来打印内容
                        return make_node(AST_Undefined, self).optimize(compressor); // 用 AST_Undefined 节点替换当前 console节点(AST节点), AST_Undefined 定义在 node_modules/uglify-js/lib/ast.js 文件中
                    }
                }
    }
    
    ...
    // 生成AST节点
    function make_node(ctor, orig, props) {
            if (!props) props = {};
            if (orig) {
                // 将原始console节点(AST节点)start end值赋值给一个空对象(props)     
                if (!props.start) props.start = orig.start;
                if (!props.end) props.end = orig.end;
            }
            return new ctor(props);
     }
    

    总结

    明白了uglify-jsconsole.log的处理方法后,我们想要保留console.log就很简单了,只要不是这么调用console.log(xxx)就行,写法其实有很多,原理都是用变量保留对console.log的引用

    window.log = console.log
    log('hahaha')
    
    const {log} = console
    log('wawawa')
    

    参考

    Webpack Uglify: Keep Certain console.logs

  • 相关阅读:
    递延收益
    企业收到政府补助的核算方法
    总额法
    发行股票手续费为什么冲减资本公积
    溢价发行
    融资筹资的区别是什么
    资本公积转增股本
    认股权证和股票期权有什么区别?
    postgresql 锁表查询语句
    生成不带版本的jar包 不影响deploy
  • 原文地址:https://www.cnblogs.com/hanshuai/p/13524720.html
Copyright © 2011-2022 走看看