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 來構(gòu)建 Vue 3 項目，Terser 已經(jīng)作為默認(rèn)的壓縮工具被內(nèi)置。
你可以通過 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、配置補(bǔ)充說明
Terser 提供了許多配置選項，以下是一些常用的配置：
- drop_console：移除所有的 console 語句。
- drop_debugger：移除所有的 debugger 語句。
- format：定義輸出格式，例如是否保留注釋。
- compress：一個對象，包含多個壓縮選項，如死代碼消除、變量提升等。
情況二
如果用腳手架vue-cli沒有默認(rèn)安裝這個插件，可以手動安裝，具體步驟如下：
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）壓縮前打包
并且打包后的代碼里有控制臺打印相關(guān)的代碼
（2）壓縮打包后
控制臺打印相關(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, // 端口號
// 如果外網(wǎng)想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轉(zhuǎn)為/
}
}
} // 配置多個代理
},
assetsDir: 'static',
lintOnSave: false,
};
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中之nextTick函數(shù)源碼分析,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue之子組件如何修改父組件的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要給大家介紹了關(guān)于vue3?Props的用法(父傳子)的相關(guān)資料,在Vue3中Props用于組件間數(shù)據(jù)傳遞,允許類型檢查和默認(rèn)值設(shè)置,文中將用法介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
最近入職了新公司,接手了一個新拆分出來的Vue項目,針對該項目做了個打包優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于Vue項目中打包優(yōu)化的四種方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
淺談Vue內(nèi)置component組件的應(yīng)用場景
這篇文章主要介紹了淺談Vue內(nèi)置component組件的應(yīng)用場景，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Vue項目使用localStorage+Vuex保存用戶登錄信息
這篇文章主要為大家詳細(xì)介紹了Vue項目使用localStorage+Vuex保存用戶登錄信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了vue實現(xiàn)直播間點贊飄心效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
下面小編就為大家分享一篇在vue中實現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
最近在vue中安裝Three.js,無聊順便研究一些關(guān)于3D圖形化庫,下面這篇文章主要給大家介紹了關(guān)于vue+threejs寫物體動畫之物體縮放動畫效果的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解
這篇文章主要介紹了vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09