移动端调试不是总能 inspect 一通的，为此我们引入了腾讯的万金油 vConsole。开发时固然蛋定，发布时却有点操蛋。

开始的使用

通过判断是否为 dev 环境，加载 vConsole 并实例化使用：

// 开发时引入 vConsoleif (process.env.NODE_ENV === 'development') {  // 吐槽一波：不支持 import 方式  const VConsole = require('vconsole');  new VConsole();}复制代码

生产环境是没有 vConsole 了吧！想象很丰满，打包很骨感。

如果你 splitChunks 了的话，打包后的文件多出了个 vConsole，约 90k。使用 webpack-bundle-analyzer 分析也会看到多出一大块。。。

在这个移动端分秒必争的时代，凡是能从代码层面上优化的没理由不做。

> 每次合并到主分支时注释再提交，像下面这样[笑哭]// 开发时引入 vConsole// if (process.env.NODE_ENV === 'development') {
    //   // 吐槽一波：不支持 import 方式//   const VConsole = require('vconsole');//   new VConsole();// }> 每次开发时再去掉注释，丢你煤泥~复制代码

码·格瓦拉：“优化是不可能不优化的，这辈子都不可能不优化的。”

定义浏览器端环境变量

启动时 NODE_ENV=development webapck 这样定义的环境变量只在 node 执行 webpack 时生效，通过 process.env 访问。简而言之，只能在 webpack.config.js 中判断 dev/prod。

所以实现之前的代码逻辑我们需要 。使用时：

// webpack.config.jsconst webpack = require('webpack');module.exports ={  plugins: [    new webpack.DefinePlugin({      __DEV__: JSON.stringify(false),    }),  ],};复制代码

引入 vConsole 的方式基本不变：

// index.js// __DEV__ 就是 DefinePlugin 注入的全局常量// 开发时引入 vConsoleif (__DEV__) {  // 吐槽一波：不支持 import 方式  const VConsole = require('vconsole');  new VConsole();}// 打包后的代码长这样：// 看起来这插件就是执行文本替换的功能if (false) {  // 吐槽一波：不支持 import 方式  const VConsole = require('vconsole');  new VConsole();}复制代码

代码逻辑实现了，但是 vConsole 依旧在打包文件里。这时候就要借助我们功能强大的代码压缩。

代码压缩

webpack v4 版本设置为 mode: 'production' 后默认即启用代码压缩。

以前推荐的是 UglifyjsWebpackPlugin，底层 ，但是只支持 ES5，所以仓库上还有个 harmony 分支用来处理 ES6，webpack 插件用的也是这个分支。但是这个分支已经长时间没人维护了，所以官方转到另一个 TerserWebpackPlugin，两个插件基本一模一样。

手动启用：

module.exports = {  optimization: {    minimize: true  },};// 或者直接覆盖自带的，可进行颗粒度的控制const TerserWebpackPlugin = require('terser-webpack-plugin');module.exports = {  optimization: {    minimizer: [      new TerserWebpackPlugin({        terserOptions: {          compress: {            dead_code: true, // 默认。删除不可到达的代码          },        },      });    ],  },};复制代码

而我们需要的就是其删除 dead code 功能，类似下面这样的就是 dead code:

----------------------------| if (false) alert('你好'); | // 一块 dead code----------------------------复制代码

实际使用可能需要进行判断，但是有点坑。

1. Boolean/Number 支持可写表达式判断
2. String 只支持完全相同的两字符串判断，不同字符串不支持
3. Undefined/Null 不支持

最后

使用 DefinePlugin + TerserWebpackPlugin 配置，打包后发现 vConsole 没了。可以向老板申请加鸡腿了······

小贴士：ProvidePlugin 与 externals 的区别，前者自动 import，后者是无需 npm install 即可直接 import。

参考链接