把你的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 ✗ Boolean/Number 支持可写表达式判断 String 只支持完全相同的两字符串判断,不同字符串不支持 Undefined/Null 不支持 最后 使用 DefinePlugin + TerserWebpackPlugin 配置,打包后发现 vConsole 没了。可以向老板申请加鸡腿了······ 小贴士:ProvidePlugin 与 externals 的区别,前者自动 import,后者是无需 npm install 即可直接 import。 参考链接 webpack选择性编译DefinePlugin(打包自动剔除测试数据) webpack的打包和性能优化 webpack更新至4.26

Markdown - 语法


JavaScript

上一篇:钢铁是怎样炼成的

下一篇:打酱油

Ctrl + Enter