综合技术

把你的devtools从webpack里删除

微信扫一扫,分享到朋友圈

把你的devtools从webpack里删除
0

通过判断是否为 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
----------------------------
复制代码

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

statementdead_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

阅读原文...

微信扫一扫,分享到朋友圈

把你的devtools从webpack里删除
0
稀土掘金

深入理解javascript事件机制

上一篇

开启区块链大航海时代的DAG 全球著名DAG项目列阵点兵

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

把你的devtools从webpack里删除

长按储存图像,分享给朋友