首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue打包terser压缩去除控制台打印和断点

vue打包terser压缩去除控制台打印和断点过程

2024-07-19 09:01:49 作者：EricFRQ

这篇文章主要介绍了vue打包terser压缩去除控制台打印和断点过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

情况一

1、vue-cli搭建

代码压缩工具terser在vue-cli里面是自动支持的，所以直接在vue.config.js里面加入下面配置：

const {defineConfig} = require('@vue/cli-service')
module.exports=defineConfig({
  transpileDependencies:true,
  terser:{
    terserOptions: {
      compress: {
        drop_console: true, // 移除 console
        drop_debugger: true, // 移除 debugger
      },
    },
  }
})

2、Vite 搭建

如果你使用的是 Vite 来构建 Vue 3 项目，Terser 已经作为默认的压缩工具被内置。

你可以通过 vite.config.js 文件来自定义 Terser 的配置，所以直接加入下面配置即可：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { terser } from 'rollup-plugin-terser';

export default defineConfig({
  plugins: [
    vue(),
    terser({
      format: {
        comments: false, // 不保留注释
      },
      compress: {
        drop_console: true, // 移除 console
        drop_debugger: true, // 移除 debugger
      },
    }),
  ],
});

3、配置补充说明

Terser 提供了许多配置选项，以下是一些常用的配置：

drop_console：移除所有的 console 语句。
drop_debugger：移除所有的 debugger 语句。
format：定义输出格式，例如是否保留注释。
compress：一个对象，包含多个压缩选项，如死代码消除、变量提升等。

情况二

如果用脚手架vue-cli没有默认安装这个插件，可以手动安装，具体步骤如下：

1、安装插件

npm install terser-webpack-plugin --save-dev

2、vue.config.js里面加入配置

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true, // 移除 console
              drop_debugger: true, // 移除 debugger
            },
          },
        }),
      ],
    },
  },
};

3、效果对比

（1）压缩前打包

并且打包后的代码里有控制台打印相关的代码

（2）压缩打包后

控制台打印相关的代码也被屏蔽了

4、vue-cli搭建的vue3 完整参考文件

配置如下：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // publicPath: "/zhaopin",
  chainWebpack: config => {
    config.plugins.delete("fork-ts-checker"); // 禁用fork-ts-checker
  },
  configureWebpack: //插件配置
  {
    // plugins:
    //   [new CopyWebpackPlugin(
    //     { patterns: [{ from: path.resolve(__dirname, 'static'), to: 'server', }] }
    //   )
    //   ]
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true, // 移除 console
              drop_debugger: true, // 移除 debugger
            },
          },
        }),
      ],
    },
  },
  devServer: {
    port: 8080, // 端口号
    // 如果外网想ip访问 屏蔽掉host
    // host: 'localhost',
    https: false, // https:{type:Boolean}
    open: false, // 配置自动启动浏览器
    // proxy: 'http://localhost:3000' // 配置跨域处理,只有一个代理
    proxy: {
      'sysApi/': {
        // target: 'http://localhost:8088',
        target: 'http://1.94.47.xxx:8021/sysApi',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/sysApi': '' // 通过pathRewrite重写地址，将前缀/api转为/
        }
      }
    } // 配置多个代理
  },
  assetsDir: 'static',
  lintOnSave: false,
};

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。