把你的devtools从webpack里删除

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

开始的使用

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

// 开发时引入 vConsole
if (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。

因此实现以前的代码逻辑咱们须要 DefinePlugin。使用时：

// webpack.config.js
const webpack = require('webpack');

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

引入 vConsole 的方式基本不变：

// index.js
// __DEV__ 就是 DefinePlugin 注入的全局常量
// 开发时引入 vConsole
if (__DEV__) {
  // 吐槽一波：不支持 import 方式
  const VConsole = require('vconsole');
  new VConsole();
}

// 打包后的代码长这样：
// 看起来这插件就是执行文本替换的功能
if (false) {
  // 吐槽一波：不支持 import 方式
  const VConsole = require('vconsole');
  new VConsole();
}
复制代码

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

代码压缩

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

之前推荐的是 UglifyjsWebpackPlugin，底层 uglify-js，可是只支持 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
----------------------------
复制代码

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

statement	dead_code 支持
true/false	✓
1 === 2	✓
'a' !== 'a'	✓
'a' !== 'b'	✗
undefined/null	✗

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

最后

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

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

参考连接

1. webpack选择性编译DefinePlugin（打包自动剔除测试数据）
2. webpack的打包和性能优化
3. webpack更新至4.26