在构建 Vue 应用时,为了提高生产环境的性能和安全性,通常会对代码进行一系列的优化。其中一个常见的优化是在生产环境中移除 console.log 日志,从而减少不必要的日志输出,提高应用性能
webpack生产环境优化
1. 环境判断
首先,我们需要判断当前环境是否为生产环境。这可以通过检查 process.env.NODE_ENV 环境变量来实现:
const isProduction = process.env.NODE_ENV === 'production'; // 判断当前环境是否为生产环境
如果 process.env.NODE_ENV 的值为 'production',则 isProduction 为 true,表示当前环境为生产环境。
在生产环境中,我们希望移除所有的 console.log 日志。这可以通过配置 terserOptions 来实现。terserOptions 是 webpack 中用于压缩代码的配置项之一。
2.1 配置 terserOptions
在 vue.config.js 中,我们可以使用 configureWebpack 方法来配置 webpack 的相关选项
configureWebpack: config => { // 配置 webpack
// 其他配置...
if (isProduction) { // 如果是生产环境
// 为生产环境修改配置...
// 生产环境自动删除 console
config.optimization.minimizer[0].options.terserOptions.compress = {
drop_console: true, // 删除 console.log
pure_funcs: ['console.log'] // 删除 console.log 函数调用
};
}
}
Vite 环境下的生产环境优化
1. 环境判断
首先,我们需要判断当前环境是否为生产环境。这可以通过检查 process.env.NODE_ENV 环境变量来实现:
const isProduction = process.env.NODE_ENV === 'production'; // 判断当前环境是否为生产环境
2. 生产环境优化
在生产环境中,我们希望移除所有的 console.log 日志。这可以通过配置 terser 插件来实现。terser 是一个用于压缩 JavaScript 代码的工具。
完整的 vite.config.js 示例
import { defineConfig } from 'vite';
import terser from '@rollup/plugin-terser';
const isProduction = process.env.NODE_ENV === 'production'; // 判断当前环境是否为生产环境
export default defineConfig({
// 基本路径
base: isProduction ? '/' + process.env.VUE_APP_ORDERURL + '/' : '/',
// 输出文件目录
build: {
outDir: process.env.VUE_APP_ORDERURL,
rollupOptions: {
plugins: [
// 生产环境自动删除 console
...(isProduction ? [
terser({
compress: {
drop_console: true, // 删除 console.log
pure_funcs: ['console.log'] // 删除 console.log 函数调用
}
})
] : [])
]
}
}
});