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-resource请求实现http登录拦截或者路由拦截的方法

    vue-resource请求实现http登录拦截或者路由拦截的方法

    这篇文章主要介绍了vue-resource请求实现http登录拦截或者路由拦截的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • VUE组件中的 Drawer 抽屉实现代码

    VUE组件中的 Drawer 抽屉实现代码

    这篇文章主要介绍了VUE组件 之 Drawer 抽屉 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue利用better-scroll实现轮播图与页面滚动详解

    vue利用better-scroll实现轮播图与页面滚动详解

    在我们日常的项目开发中,处理滚动和轮播图是再常见不过的需求了,下面这篇文章主要给大家介绍了关于vue利用better-scroll实现轮播图与页面滚动的相关资料,文中给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-10-10
  • Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)

    Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)

    这篇文章主要介绍了Vue Router解决多路由复用同一组件页面不刷新问题,多路由复用同一组件的场景分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • Vue终端取消vue、prettier警告warn问题

    Vue终端取消vue、prettier警告warn问题

    这篇文章主要介绍了Vue终端取消vue、prettier警告warn问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vuex中的state属性解析

    vuex中的state属性解析

    这篇文章主要介绍了vuex中的state属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue vant-ui框架实现上拉加载下拉刷新功能

    Vue vant-ui框架实现上拉加载下拉刷新功能

    功能需求——获取后端接口返回的数据,实现列表数据上滑加载更多下一页数据,下拉数据刷新功能,结合vant-ui框架实现。可直接参考使用
    2022-09-09
  • 实例详解vue.js浅度监听和深度监听及watch用法

    实例详解vue.js浅度监听和深度监听及watch用法

    这篇文章主要介绍了vue.js浅度监听和深度监听及watch用法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-08-08
  • vue实现重置表单信息为空的方法

    vue实现重置表单信息为空的方法

    今天小编就为大家分享一篇vue实现重置表单信息为空的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3中使用vant的踩坑实战日记

    Vue3中使用vant的踩坑实战日记

    Vant是有赞前端团队开源的移动端组件库,于2017年开源,已持续维护4年时间,下面这篇文章主要给大家介绍了关于Vue3中使用vant的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-10-10

最新评论