我开发微信小程序的时候，喜欢在代码中写入大量的console.*,用来追踪问题。通常一个页面需要输出100多个调试信息。这在生产环境中可能会影响性能。
小程序的开发我使用的是这个包。https://ice-vite.netlify.app/ 一个非常棒的脚手架，可以让我在小程序内使用tailwindcss。这个脚手架是基于vite编译的。好在vite本身提供了一键去除console.*的配置。
安装
yarn add -D terser
然后把根目录的vite.config.ts改成下面这样
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
import { TDesignResolver } from 'weapp-vite/auto-import-components/resolvers'
// 尝试从 weapp-vite 或 vite 导入类型
// 可能是 'vite' 或者 'weapp-vite/config' 提供了 UserConfig 类型
import type { UserConfig } from 'vite'; // 或者从 'weapp-vite/config' (如果它导出)
import { defineConfig } from 'weapp-vite/config'
// 确保 defineConfig 返回值或接受的函数参数与 UserConfig 兼容
export default defineConfig(({ command, mode }) => {
const isBuild = command === 'build';
// 显式定义 config 的类型
const config: UserConfig = {
// weapp specific config - 可能需要一个扩展 UserConfig 的类型
// 如果 weapp-vite 提供了自己的类型，优先使用那个
weapp: {
srcRoot: 'src',
enhance: {
autoImportComponents: {
resolvers: [TDesignResolver()],
},
},
generate: {
extensions: {
js: 'ts',
wxss: 'scss',
},
dirs: {
component: 'src/components',
page: 'src/pages',
},
},
},
css: {
preprocessorOptions: {
scss: {
silenceDeprecations: ['legacy-js-api', 'import'],
},
},
},
plugins: [
UnifiedViteWeappTailwindcssPlugin({
rem2rpx: true,
}),
],
// 初始化 build 为一个空对象，让 TypeScript 知道它可能存在
// 并且类型应该符合 UserConfig 中的 build 定义
build: {},
};
if (isBuild) {
// 现在 TypeScript 知道 config.build 是 BuildConfig | undefined
// 直接赋值或合并
config.build = {
...config.build, // 保留可能已有的 build 配置
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
};
}
// dev 模式下，config.build 保持为空对象 {} 或 者是 build 的默认值
// 不包含 minify: 'terser' 和 terserOptions
return config;
});
然后在yarn build打包后，代码中就不包含任何console信息了。但是如果yarn dev，你可以继续看到所有的调试信息。
参考资料见：
https://vite.dev/config/build-options.html#build-minify
https://terser.org/docs/options/
提供