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,
};

总结

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

相关文章

  • 关于vue v-for循环解决img标签的src动态绑定问题

    关于vue v-for循环解决img标签的src动态绑定问题

    今天小编就为大家分享一篇关于vue v-for循环解决img标签的src动态绑定问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue 的 solt 子组件过滤过程解析

    vue 的 solt 子组件过滤过程解析

    这篇文章主要介绍了vue 的 solt 子组件过滤过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • Vue中使用vue-plugin-hiprint插件进行打印的功能实现

    Vue中使用vue-plugin-hiprint插件进行打印的功能实现

    hiprint 是一个web 打印的js组件,无需安装软件,支持windows,macOS,linux 系统,支持移动端,PC端浏览器,angular,vue,react 等 分页预览,打印,操作简单,运行快速,本文介绍了Vue中使用vue-plugin-hiprint插件进行打印,需要的朋友可以参考下
    2025-04-04
  • 解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    下面小编就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue Router的介绍与引入功能详解

    Vue Router的介绍与引入功能详解

    Vue Router 是 Vue.js 的官方路由,它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举,这篇文章主要介绍了Vue Router的介绍与引入,需要的朋友可以参考下
    2024-01-01
  • vue.js实现的绑定class操作示例

    vue.js实现的绑定class操作示例

    这篇文章主要介绍了vue.js实现的绑定class操作,结合实例形式分析了vue.js绑定class常见的3种操作技巧,需要的朋友可以参考下
    2018-07-07
  • 最新Vue过滤器介绍及使用方法

    最新Vue过滤器介绍及使用方法

    过滤器是vue为开发者提供的功能,常用于文本的格式化,过滤器应该被添加在JavaScrip表达式的尾部,由“管道符”进行调用,这篇文章通过案例给大家讲解Vue过滤器介绍及使用方法,需要的朋友参考下吧
    2022-11-11
  • vue axios重复点击取消上一次请求封装的方法

    vue axios重复点击取消上一次请求封装的方法

    这篇文章主要介绍了vue axios重复点击取消上一次请求封装的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • vue项目登录模块滑块拼图验证功能实现代码(纯前端)

    vue项目登录模块滑块拼图验证功能实现代码(纯前端)

    滑块验证作为一种反机器人的工具,也会不断发展和演进,以适应不断变化的威胁,这篇文章主要给大家介绍了vue项目登录模块滑块拼图验证功能实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • 一文详解如何解决Vue2前端项目无法访问本地资源问题

    一文详解如何解决Vue2前端项目无法访问本地资源问题

    最近遇到不少同学反馈,Vue2 项目能 npm run serve 启动,但页面一直转圈,某个 chunk.js 加载不到(pending),本文我们就来看看具体解决方法吧
    2025-09-09

最新评论