去除生产环境console的loader

在日常开发环境中，为了方便调试我们往往会加入许多console.log打印，但是我们不希望在生产环境中存在打印的值。虽然webpack4中已经集成了去除console的功能，在minimizer中可配置 去除console。但webpack3没有这个功能，需要我们自己去处理。

1、安装依赖

npm i -D @babel/parser @babel/traverse @babel/generator @babel/types

• @babel/parser 将源代码解析成 AST
• @babel/traverse 对AST节点进行递归遍历，生成一个便于操作、转换的path对象
• @babel/generator 将AST解码生成js代码
• 通过该模块对具体的AST节点进行进行增、删、改、查

2、在根目录新建drop-console.js文件

// drop-console.js
const parser = require('@babel/parser') //将源代码解析成AST
const traverse = require('@babel/traverse').default  //对AST节点进行递归遍历，生成一个便于操作、转换的path对象
const generator = require('@babel/generator').default //将AST解码生成js代码
const t = require('@babel/types')  //对具体的AST节点进行增删改查

module.exports  = function(source) {
    let sourceStr = source;
    let subArr = [];
    let output = null;
    if(sourceStr.indexOf('<script>') !== -1 && sourceStr.indexOf('</script>') !== -1) { //对vue中的js进行捕获并去除console
        sourceStr = source.match(/<script.*?>([\s\S]+?)<\/script>/)[1]; 
        subArr = source.split(sourceStr);
    }
    const ast = parser.parse(sourceStr, {sourceType: 'module'})
    traverse(ast, {
        CallExpression(path) {
            if(t.isMemberExpression(path.node.callee) && t.isIdentifier(path.node.callee.object, {name: "console"})) {
                path.remove()
            }
        }
    })
    if(source.indexOf('<script>') !== -1 && source.indexOf('</script>') !== -1) { //对vue中的js进行捕获并去除console
        output = generator(ast, {}, sourceStr);
        output.code = subArr[0] + output.code + subArr[1];
    } else {
        output = generator(ast, {}, sourceStr);
    }
    return output.code
}

大功告成！下面验证一下打包速度和打包体积

在我自己的项目测试，配置前打包完整个项目的时间为：42245ms，体积为：3833k；配置后所需的时间为16705ms，体积为2219k。