生产环境打包去除console.log

最新推荐文章于 2025-02-08 13:04:32 发布

小储今天暴富了

最新推荐文章于 2025-02-08 13:04:32 发布

阅读量316

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_53474595/article/details/128485901

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用babel-plugin-transform-remove-console插件，在生产环境中去除console.log输出，以减小打包体积并提高应用性能。文章详细展示了如何根据不同环境变量配置Babel，实现对console.log的智能移除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先安装插件 babel-plugin-transform-remove-console

npm install babel-plugin-transform-remove-console --save

2.在babel.config.js里判断开发环境还是生产环境，代码如下：


const productPlugins = []
//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  'plugins': [
    [
      "component",
      {
        "libraryName": "element-ui",//按需加载element-ui
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins
  ]
}

其中环境的配置在package.json文件里