Vue项目中如何优雅的清除生产环境中所有的日志信息？

Lakeiedward
259 阅读3分钟

说明

当我们在本地环境和测试环境，这两种环境下可能需要根据控制台的日志信息来定位bug，但是在生产环境中我们就不需要这些日志信息了，而且这些日志信息还会占用我们生产包的体积！

所以说，我们如何只在生产环境中去除掉日志信息，而本地环境和测试环境中仍然保留日志信息呢？

接下来就要介绍一款webpack的插件webpack-parallel-uglify-plugin，该插件的用处有一下几点，我们也会围绕着这两点来实践一下，

  • 清除生产环境的log日志
  • 开启多核压缩，提高压缩效率

configureWebpack

在介绍这几点之前，我们需要了解下vue-cli脚手架里面的一些配置，因为我们的vue项目，大多数都是基于vue-cli进行搭建的，并不是根据webpack自己手动搭建的。那么如何在vue.config.js中引入我们自定义的webpack的配置？此时需要用到configureWebpack属性，该对象将会被webpack-merge合并入最终的 webpack 配置中。

了解到该方法之后，就可以使用webpack的webpack-parallel-uglify-plugin插件了，来下载安装一下：

npm install --save-dev webpack-parallel-uglify-plugin@1.1.1

这里建议使用v1.1.1版本，基本适配webpack所有版本。

图片.png

"peerDependencies": {
    "webpack": "*"
  }

下载好之后，就可以愉快的使用了。

清除所有log日志

使用起来很简单，只需要在vue.config.js中引入webpack-parallel-uglify-plugin，进行简单的配置即可~

//vue.config.js
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
module.exports = {
    configureWebpack: (config) => {
      if (process.env.NODE_ENV === "production") {
        // 为生产环境修改配置...
        return {
            new ParallelUglifyPlugin({
              uglifyJS: {
                compress: {
                  drop_console: true, // 是否删除代码中所有的console语句，默认为false
                },
              },
            }),
          ],
        };
    },
}

测试

配置之后，让我们实践测试一下，实践出真理，分为以下几个环境测试：

  1. 本地环境测试
  2. 测试环境测试
  3. 生产环境测试

我们需要简单配置下项目的环境

  "scripts": {
    "serve": "vue-cli-service serve --mode test",
    "test": "rimraf dist && vue-cli-service build --mode test",
    "build:prod": "rimraf dist && vue-cli-service build",
  },

开发环境中，正常显示日志信息。

图片.png

测试环境中，日志信息依然存在!

图片.png

生产环境包中，打开控制台发现日志信息已经不见，达到了我们的目的！但是别急webpack-parallel-uglify-plugin不仅仅只有这个功能，还有其他的一些功能。

图片.png

多核压缩

当webpack有多个JS文件需要输出和压缩时候，原来会使用UglifyJS去一个个压缩并且输出，但是ParallelUglifyPlugin插件则会开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，但是每个子进程还是通过UglifyJS去压缩代码。无非就是变成了并行处理该压缩了，并行处理多个子任务，效率会更加的提高。默认已开启多核压缩，不需要手动去配置。

new ParallelUglifyPlugin({
  uglifyJS: {},
  test: /.js$/g,
  include: [],
  exclude: [],
  cacheDir: '',
  workerCount: '',
  sourceMap: false
});

在通过 new ParallelUglifyPlugin() 实列化时，支持以下参数配置如下：

  • test: 使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩，默认是 /.js$/.
  • include: 使用正则去包含被 ParallelUglifyPlugin 压缩的文件，默认为 [].
  • exclude: 使用正则去不包含被 ParallelUglifyPlugin 压缩的文件，默认为 [].
  • cacheDir: 缓存压缩后的结果，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回，cacheDir 用于配置缓存存放的目录路径。默认不会缓存，想开启缓存请设置一个目录路径。
  • workerCount：开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1。
  • sourceMap：是否为压缩后的代码生成对应的Source Map, 默认不生成，开启后耗时会大大增加，一般不会将压缩后的代码的sourceMap发送给网站用户的浏览器。
  • uglifyJS：用于压缩 ES5 代码时的配置，Object 类型，直接透传给 UglifyJS 的参数。
avatar
文章
阅读
粉丝