vue打包terser壓縮去除控制臺(tái)打印和斷點(diǎn)過(guò)程
更新時(shí)間：2024年07月19日 09:01:49 作者：EricFRQ
這篇文章主要介紹了vue打包terser壓縮去除控制臺(tái)打印和斷點(diǎn)過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
情況一
1、vue-cli搭建
代碼壓縮工具terser在vue-cli里面是自動(dòng)支持的，所以直接在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 來(lái)構(gòu)建 Vue 3 項(xiàng)目，Terser 已經(jīng)作為默認(rèn)的壓縮工具被內(nèi)置。
你可以通過(guò) vite.config.js 文件來(lái)自定義 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、配置補(bǔ)充說(shuō)明
Terser 提供了許多配置選項(xiàng)，以下是一些常用的配置：
- drop_console：移除所有的 console 語(yǔ)句。
- drop_debugger：移除所有的 debugger 語(yǔ)句。
- format：定義輸出格式，例如是否保留注釋。
- compress：一個(gè)對(duì)象，包含多個(gè)壓縮選項(xiàng)，如死代碼消除、變量提升等。
情況二
如果用腳手架vue-cli沒有默認(rèn)安裝這個(gè)插件，可以手動(dòng)安裝，具體步驟如下：
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、效果對(duì)比
（1）壓縮前打包
并且打包后的代碼里有控制臺(tái)打印相關(guān)的代碼
（2）壓縮打包后
控制臺(tái)打印相關(guān)的代碼也被屏蔽了
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, // 端口號(hào)
// 如果外網(wǎng)想ip訪問(wèn) 屏蔽掉host
// host: 'localhost',
https: false, // https:{type:Boolean}
open: false, // 配置自動(dòng)啟動(dòng)瀏覽器
// proxy: 'http://localhost:3000' // 配置跨域處理,只有一個(gè)代理
proxy: {
'sysApi/': {
// target: 'http://localhost:8088',
target: 'http://1.94.47.xxx:8021/sysApi',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/sysApi': '' // 通過(guò)pathRewrite重寫地址，將前綴/api轉(zhuǎn)為/
}
}
} // 配置多個(gè)代理
},
assetsDir: 'static',
lintOnSave: false,
};
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問(wèn)題
今天小編就為大家分享一篇關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue 的 solt 子組件過(guò)濾過(guò)程解析
這篇文章主要介紹了vue 的 solt 子組件過(guò)濾過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
Vue中使用vue-plugin-hiprint插件進(jìn)行打印的功能實(shí)現(xiàn)
hiprint 是一個(gè)web 打印的js組件,無(wú)需安裝軟件,支持windows,macOS,linux 系統(tǒng),支持移動(dòng)端,PC端瀏覽器,angular,vue,react 等 分頁(yè)預(yù)覽,打印,操作簡(jiǎn)單,運(yùn)行快速,本文介紹了Vue中使用vue-plugin-hiprint插件進(jìn)行打印,需要的朋友可以參考下2025-04-04
解決使用Vue.js顯示數(shù)據(jù)的時(shí),頁(yè)面閃現(xiàn)原始代碼的問(wèn)題
下面小編就為大家分享一篇解決使用Vue.js顯示數(shù)據(jù)的時(shí),頁(yè)面閃現(xiàn)原始代碼的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue Router 是?Vue.js?的官方路由,它與 Vue.js 核心深度集成,讓用 Vue.js 構(gòu)建單頁(yè)應(yīng)用變得輕而易舉,這篇文章主要介紹了Vue Router的介紹與引入,需要的朋友可以參考下2024-01-01
vue.js實(shí)現(xiàn)的綁定class操作示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)的綁定class操作,結(jié)合實(shí)例形式分析了vue.js綁定class常見的3種操作技巧,需要的朋友可以參考下2018-07-07
過(guò)濾器是vue為開發(fā)者提供的功能，常用于文本的格式化，過(guò)濾器應(yīng)該被添加在JavaScrip表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用，這篇文章通過(guò)案例給大家講解Vue過(guò)濾器介紹及使用方法，需要的朋友參考下吧2022-11-11
vue axios重復(fù)點(diǎn)擊取消上一次請(qǐng)求封裝的方法
這篇文章主要介紹了vue axios重復(fù)點(diǎn)擊取消上一次請(qǐng)求封裝的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue項(xiàng)目登錄模塊滑塊拼圖驗(yàn)證功能實(shí)現(xiàn)代碼(純前端)
滑塊驗(yàn)證作為一種反機(jī)器人的工具,也會(huì)不斷發(fā)展和演進(jìn),以適應(yīng)不斷變化的威脅,這篇文章主要給大家介紹了vue項(xiàng)目登錄模塊滑塊拼圖驗(yàn)證功能實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
一文詳解如何解決Vue2前端項(xiàng)目無(wú)法訪問(wèn)本地資源問(wèn)題
最近遇到不少同學(xué)反饋,Vue2 項(xiàng)目能 npm run serve 啟動(dòng),但頁(yè)面一直轉(zhuǎn)圈,某個(gè) chunk.js 加載不到（pending）,本文我們就來(lái)看看具體解決方法吧2025-09-09