在 Taro 项目中,为了减少 console 的显示(例如 console.log、console.info 等),可以通过配置 terser-webpack-plugin 来移除生产环境中的 console 调用。
配置步骤:
修改 index.js 文件
在 mini.webpackChain 中添加 terser-webpack-plugin 配置:
const config = {projectName: 'taro-react',date: '2025-5-10',designWidth: 750,deviceRatio: {640: 2.34 / 2,750: 1,828: 1.81 / 2},sourceRoot: 'src',outputRoot: 'dist',plugins: [],defineConstants: {},copy: {patterns: [],options: {}},framework: 'react',compiler: 'webpack5',cache: {enable: false},mini: {webpackChain(chain) {// 生产环境移除 consoleif (process.env.NODE_ENV === 'production') {chain.optimization.minimize(true);chain.plugin('terser').use(require('terser-webpack-plugin'), [{terserOptions: {compress: {drop_console: true, // 移除所有 consoledrop_debugger: true // 移除 debugger}}}]);}}},h5: {publicPath: '/',staticDirectory: 'static',postcss: {autoprefixer: {enable: true,config: {}}}}
};module.exports = function (merge) {if (process.env.NODE_ENV === 'development') {return merge({}, config, require('./dev'));}return merge({}, config, require('./prod'));
};
构建生产环境代码
使用以下命令构建生产环境代码:
pnpm build:weapp --mode production
在 Taro 项目中,为了减少 console
的显示(例如 console.log
、console.info
等),可以通过配置 terser-webpack-plugin
来移除生产环境中的 console
调用。
配置步骤:
-
修改 index.js 文件
在mini.webpackChain
中添加terser-webpack-plugin
配置:const config = {projectName: 'taro-react',date: '2025-5-10',designWidth: 750,deviceRatio: {640: 2.34 / 2,750: 1,828: 1.81 / 2},sourceRoot: 'src',outputRoot: 'dist',plugins: [],defineConstants: {},copy: {patterns: [],options: {}},framework: 'react',compiler: 'webpack5',cache: {enable: false},mini: {webpackChain(chain) {// 生产环境移除 consoleif (process.env.NODE_ENV === 'production') {chain.optimization.minimize(true);chain.plugin('terser').use(require('terser-webpack-plugin'), [{terserOptions: {compress: {drop_console: true, // 移除所有 consoledrop_debugger: true // 移除 debugger}}}]);}}},h5: {publicPath: '/',staticDirectory: 'static',postcss: {autoprefixer: {enable: true,config: {}}}} };module.exports = function (merge) {if (process.env.NODE_ENV === 'development') {return merge({}, config, require('./dev'));}return merge({}, config, require('./prod')); };
-
构建生产环境代码
使用以下命令构建生产环境代码:pnpm build:weapp --mode production
或者,如果你使用的是 npm/yarn:
npm run build:weapp --mode production # 或 yarn build:weapp --mode production
-
效果
- 生产环境中,所有
console.log
、console.info
、console.debug
等调用都会被移除。 console.warn
和console.error
不会被移除(用于调试和错误追踪)。debugger
语句也会被移除。
- 生产环境中,所有
注意事项:
-
确保
terser-webpack-plugin
已安装(Taro 默认会安装)。 -
在开发环境中,
console
调用仍然会保留,方便调试。 -
如果需要移除所有类型的
console
,可以在terserOptions.compress
中添加更多配置,例如:compress: {drop_console: true,drop_debugger: true,pure_funcs: ['console.log', 'console.info', 'console.debug', 'console.warn', 'console.error'] }
Similar code found with 2 license types