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中之nextTick函数源码分析详解

    Vue中之nextTick函数源码分析详解

    这篇文章主要介绍了Vue中之nextTick函数源码分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue之子组件如何修改父组件的值

    vue之子组件如何修改父组件的值

    这篇文章主要介绍了vue之子组件如何修改父组件的值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 一文详析vue3 Props的用法(父传子)

    一文详析vue3 Props的用法(父传子)

    这篇文章主要给大家介绍了关于vue3 Props的用法(父传子)的相关资料,在Vue3中Props用于组件间数据传递,允许类型检查和默认值设置,文中将用法介绍的非常详细,需要的朋友可以参考下
    2024-10-10
  • Vue项目中打包优化的四种方法详解

    Vue项目中打包优化的四种方法详解

    最近入职了新公司,接手了一个新拆分出来的Vue项目,针对该项目做了个打包优化,下面这篇文章主要给大家介绍了关于Vue项目中打包优化的四种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • 浅谈Vue内置component组件的应用场景

    浅谈Vue内置component组件的应用场景

    这篇文章主要介绍了浅谈Vue内置component组件的应用场景,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Vue项目使用localStorage+Vuex保存用户登录信息

    Vue项目使用localStorage+Vuex保存用户登录信息

    这篇文章主要为大家详细介绍了Vue项目使用localStorage+Vuex保存用户登录信息,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue实现直播间点赞飘心效果的示例代码

    vue实现直播间点赞飘心效果的示例代码

    这篇文章主要介绍了vue实现直播间点赞飘心效果的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue中实现图片和文件上传的示例代码

    vue中实现图片和文件上传的示例代码

    下面小编就为大家分享一篇在vue中实现图片和文件上传的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue+threejs写物体动画之物体缩放动画效果

    vue+threejs写物体动画之物体缩放动画效果

    最近在vue中安装Three.js,无聊顺便研究一些关于3D图形化库,下面这篇文章主要给大家介绍了关于vue+threejs写物体动画之物体缩放动画效果的相关资料,需要的朋友可以参考下
    2022-10-10
  • vue中{{}},v-text和v-html区别与应用详解

    vue中{{}},v-text和v-html区别与应用详解

    这篇文章主要介绍了vue中{{}},v-text和v-html区别与应用详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09

最新评论