vue项目优化之terser-webpack-plugin删除代码注释、打印敏感信息

转载已于 2022-07-19 23:18:21 修改 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/xiao1215fei/article/details/116936632

文章标签：

#vue.js #前端 #webpack

于 2022-07-19 23:17:29 首次发布

vue优化专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过安装terser-webpack-plugin插件并配置vue.config.js，实现去除Vue项目中的console、debugger等console相关代码，以优化打包并保护敏感信息。

1.安装插件（此插件可移除js和vue文件中的注释、打印等信息）

npm install terser-webpack-plugin -D;

2.在vue.config.js中进行配置

const TerserPlugin = require("terser-webpack-plugin");
 
configureWebpack: {
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          parallel: true,
          terserOptions: {
            compress: {
              drop_console: true,//移除所有console相关代码；
              drop_debugger: true,//移除自动断点功能；
              pure_funcs: ["console.log", "console.error"],//配置移除指定的指令，如console.log,alert等
            },
            format: {
              comments: false,
            },
          },
          extractComments: false,
        })
      ]
    }
  }

以上内容转载于terser-webpack-plugin删除代码注释、打印敏感信息等