内容简介:通过判断是否为 dev 环境,加载生产环境是没有如果你
通过判断是否为 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
|
✗ |
- Boolean/Number 支持可写表达式判断
- String 只支持完全相同的两字符串判断,不同字符串 不支持
- Undefined/Null 不支持
最后
使用 DefinePlugin
+ TerserWebpackPlugin
配置,打包后发现 vConsole
没了。可以向老板申请加鸡腿了······
小贴士: ProvidePlugin
与 externals
的区别,前者自动 import
,后者是无需 npm install
即可直接 import
。
以上所述就是小编给大家介绍的《把你的devtools从webpack里删除》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- MySQL删除操作其实是假删除
- C++拾趣——STL容器的插入、删除、遍历和查找操作性能对比(Windows VirtualStudio)——删除
- 我用 Python 找出了删除我微信的所有人并将他们自动化删除了
- C++拾趣——STL容器的插入、删除、遍历和查找操作性能对比(Windows VirtualStudio)——遍历和删除
- ruby-on-rails-4 – Rails 4:如何从数据库中删除或删除(连接)表表?
- 删除并恢复
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数据结构与算法:Python语言描述
裘宗燕 / 机械工业出版社 / 2016-1 / CNY 45.00
本书基于Python语言介绍了数据结构与算法的基本知识,主要内容包括抽象数据类型和Python面向对象程序设计、线性表、字符串、栈和队列、二叉树和树、集合、排序以及算法的基本知识。本书延续问题求解的思路,从解决问题的目标来组织教学内容,注重理论与实践的并用。一起来看看 《数据结构与算法:Python语言描述》 这本书的介绍吧!