(共556篇)
全部分类

vue_cli构建的项目中如何去掉console日志
[ Vue(2+3) ] 

terser-webpack-plugin是一款 webpack 中用来压缩 JS 的插件

项目环境:

1
2
vue-element-admin 项目
@vue/cli-service@3.5.3

@vue/cli-service@3.5.3中自带了terser-webpack-plugin@^1.2.2版本的插件(写这篇笔记的时候,自动安装的是 1.4.4 版本),并设置了一些默认的配置项,通过vue-cli-service inspect --mode production可以看到它的默认配置项:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
minimizer: [
      {
        options: {
          test: /\.m?js(\?.*)?$/i,
          chunkFilter: () => true,
          warningsFilter: () => true,
          extractComments: false,
          sourceMap: false,
          cache: true,
          cacheKeys: defaultCacheKeys => defaultCacheKeys,
          parallel: true,
          include: undefined,
          exclude: undefined,
          minify: undefined,
          terserOptions: {
            output: {
              comments: /^\**!|@preserve|@license|@cc_on/i
            },
            compress: {
              arrows: false,
              collapse_vars: false,
              comparisons: false,
              computed_props: false,
              hoist_funs: false,
              hoist_props: false,
              hoist_vars: false,
              inline: false,
              loops: false,
              negate_iife: false,
              properties: false,
              reduce_funcs: false,
              reduce_vars: false,
              switches: false,
              toplevel: false,
              typeofs: false,
              booleans: true,
              if_return: true,
              sequences: true,
              unused: true,
              conditionals: true,
              dead_code: true,
              evaluate: true
            },
            mangle: {
              safari10: true
            }
          }
        }
      }
    ],

插件的readme文件中写的很清楚,插件的核心使用的是Terser 库,所以terserOptions中的参数还是要去terser的文档上去找,我们需要的是terserOptions.compress.drop_console参数,所以在你的vue.config.js中如下配置:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const TerserPlugin = require('terser-webpack-plugin');
config.optimization.minimizer([
    new TerserPlugin({
        extractComments: false,
        sourceMap: false,
        terserOptions: {
            output: {
                comments: /^\**!|@preserve|@license|@cc_on/i,
            },
            compress: {
                drop_console: true, // 这个参数设为true就可以去掉项目中的console语句了
                arrows: false,
                collapse_vars: false,
                comparisons: false,
                computed_props: false,
                hoist_funs: false,
                hoist_props: false,
                hoist_vars: false,
                inline: false,
                loops: false,
                negate_iife: false,
                properties: false,
                reduce_funcs: false,
                reduce_vars: false,
                switches: false,
                toplevel: false,
                typeofs: false,
                booleans: true,
                if_return: true,
                sequences: true,
                unused: true,
                conditionals: true,
                dead_code: true,
                evaluate: true,
            },
            mangle: {
                safari10: true,
            },
        },
    }),
]);

顺便尝试总结一下 terser 中的参数作用

format.comments (default “some”)

设置保留那些注释,默认some会保留JSDoc样式的注释,比如@author等;设置为true或者'all'会保留所有注释;设置为false不会保留所有类型的注释

也可以设置为一个正则表达式,或者设置为一个function

1
2
3
4
5
6
7
8
format:{
    comments:'some',
    comments:true/'all',
    comments:/自定义正则表达式/,
    comments:functin(matchText){
        return true/false
    }
}

compress.defaults(true)

如果设置为 false,将会禁用大多数的默认压缩选项,以便自定义压缩参数

compress.arrows(true)

如果设置为 true,将会把那些类似于m(){return x}的函数编译成m:()=>x的样子,如果函数中使用了thisarguments关键字不会转换 转换前:

1
2
3
let m = (x) => {
    return x + 1;
};

转换后:

1
let m = (a) => a + 1;

compress.arguments(false)

如果可以的话,把函数体中使用arguments[index]的代码替换为一个已有入参变量名,比如:

1
2
3
4
function abc(a) {
    alert(arguments[0]);
}
abc(1, 2, 3);

可能会被替换为:

1
2
3
4
function abc(a) {
    alert(a);
}
abc(1, 2, 3);

compress.booleans(true)

设置为 true 的时候,会对一些逻辑运算表达式进行优化

compress.booleans_as_integers (default: false) 慎用

设置为 true 的时候,如果变量的值是 truefalse ,会分别使用 1 或 0 替换;如果这个变量出现在===或者!==两边的 true 和 false 也会被替换,并且会吧===!==分别替换成==!=

替换前:

1
2
3
4
let a = true;
if (a === true) {
    alert(a);
}

替换后:

1
2
let a = 1;
if (1 == a) alert(a);

compress.computed_props (default: true)

设置为 true 可以把一些计算属性名转换成正常的属性名

转换前:

1
2
3
4
5
let p1 = 'p1';
let obj = {
    [p1]: 'zhangsan',
    ['p2']: 'lisi',
};

转换后:

1
2
let p1 = 'p1';
let obj = { [p1]: 'zhangsan', p2: 'lisi' };

这里的['p2']完全不需要使用计算属性名中括号,所以会被转成更为直接的属性名

compress.conditionals (default: true)

还没测试出啥效果

compress.comparisons (default: true)

还没测试出啥效果

compress.collapse_vars (default: true)

还没测试出啥效果

compress.dead_code (default: true)

设置为 true 时,会自动删掉永远无法执行的代码

压缩前:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function def() {
    return true;
    alert('def');
}
switch (c) {
    case 1:
        alert(1);
        break;
        alert(2);
    default:
        alert(3);
}

压缩后:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function def() {
    return 1;
}
switch (c) {
    case 1:
        alert(1);
        break;
    default:
        alert(3);
}

这个案例中,函数def里面return之后的语句永远都不会执行,所以会被删掉;switch语句中break关键字后的语句也是永远不会执行的,属于无效代码。

compress.drop_debugger (default: true)

设置为 true,会移除代码中所有的debugger语句

compress.drop_console (default: false)

设置为 true,会移除代码中所有的console.*语句,如果只想移除部分语句,可以使用pure_funcs参数指定

压缩前:

1
console.log('drop console');

压缩后:

1
void 0;

evaluate (default: true)

还没测试出啥效果

expression (default: false)

还没测试出啥效果

global_defs (default: {})

这个其实就是定义了一些全局常量,代码中可以使用这些常量,压缩的时候会把这些常量代替为真实的值

比如:

1
2
3
4
5
6
// 配置项
compress: {
    global_defs: {
        DEBUGGER: 'debugger';
    }
}

压缩前:

1
alert(DEBUGGER);

压缩后:

1
alert('debugger');

hoist_funs (default: false)

还没测试出啥效果

hoist_props (default: true)

还没测试出啥效果

hoist_vars (default: false)

还没测试出啥效果,官方文档上不建议开启这个选项,原因是可能会导致打包后的文件大小增大

if_return (default: true)

inline (default: true)

join_vars (default: true)

keep_classnames (default: false)

keep_fargs (default: true)

keep_fnames (default: false)

keep_infinity (default: false)

loops (default: true)

module (default false)

negate_iife (default: true)

passes (default: 1)

properties (default: true)

pure_funcs (default: null)

pure_getters (default: “strict”)

reduce_funcs

reduce_vars (default: true)

sequences (default: true)

side_effects (default: true)

switches (default: true)

toplevel (default: false)

top_retain (default: null)

typeofs (default: true)

unsafe (default: false)

unsafe_arrows (default: false)

unsafe_comps (default: false)

unsafe_Function (default: false)

unsafe_math (default: false)

unsafe_symbols (default: false)

unsafe_methods (default: false)

unsafe_proto (default: false)

unsafe_regexp (default: false)

unsafe_undefined (default: false)

unused (default: true)