vi设计的概念_中山seo外包_免费网站建站_seo优化网站的注意事项

一、解决方法

方法一：使用esbuild

直接在vite.config.ts文件中写，无需下载插件

export default defineConfig(({ mode }) => {// 环境变量const env = loadEnv(mode, root, "");return {base: env.VITE_PUBLIC_PATH,plugins: [vue(),...],resolve: {...},server: {...},esbuild: {drop: mode === "production" ? ["console", "debugger"] : []}};
});

若无需环境配置，可改为

esbuild: {drop:["console", "debugger"]}

方法二：使用terser

第一步：安装terser插件

npm i -g terser

在package.json中出现如下即为安装成功

第二步：在vite.config,ts中写入

export default defineConfig(({ mode }) => {// 环境变量const env = loadEnv(mode, root, "");return {base: env.VITE_PUBLIC_PATH,plugins: [vue(),...],resolve: {...},server: {...},build: {minify: "terser",terserOptions: {compress: {//生产环境时移除consoledrop_console: mode === "production",//生产环境时移除debuggerdrop_debugger: mode === "production"},output: {// 去除注释comments: false, },//是否压缩变量名mangle: false,},rollupOptions: {...}}};
});

若无需环境配置，可改为

build: {minify: "terser",terserOptions: {compress: {//移除consoledrop_console: true,//移除debuggerdrop_debugger: true},output: {// 去除注释comments: false, },//是否压缩变量名mangle: false,},rollupOptions: {...}}

二、terser简介

Terser 是一个 JavaScript 代码压缩工具，通过去除不必要的空格、换行和注释，能够减少 JavaScript 文件的大小，提高页面加载速度。

可以通过下面这个网站体会压缩过程：

https://www.toptal.com/developers/javascript-minifier

三、代码压缩的原理

Terser工作原理的核心在于代码压缩和混淆技术。

1.代码压缩

移除代码中的所有不必要的空白字符、注释以及未使用的代码（死代码）
对变量名、函数名进行缩短（缩短作用域内未混淆的标识符）
代码的重组，这一步骤涉及将代码重写为更紧凑的语法形式，例如，将多个变量声明合并为一个，或者将多个小的条件表达式合并为一个大的表达式。

2.混淆技术

混淆技术是提高JavaScript代码安全性的重要手段。其主要目的是使代码难以被人类理解，同时也尽量避免影响到运行时的性能。

变量名和函数名缩短
属性名缩短：作用于对象属性。
作用域分析：通过分析变量的作用域，确保只有在必要时才进行变量提升
字符串保护：避免直接在代码中暴露敏感字符串，通过一些特殊处理使字符串在压缩后的代码中不易被轻易识别。

但是过分的混淆可能导致性能下降或调试困难，因此通常需要在压缩率和代码可读性之间做出平衡。