dorajs 迁移 webpack 4 简单记录

只能简单记录,因为还要修 bug,逃~

背景

原有的 dorajs 起服务经常莫名崩溃,而且经常需要少则十几分钟多则半小时的启动时间(根据不同机型不定),虽说可以通过插件形式定制,但是官方项目已经三四年不更新,让我们对稳定性存疑,而且文档也不完整,处于不维护状态。整个项目别说领先时代,已经严重脱离时代了。这构成了我们决定升级或者说迁移工程的直接原因。

不提已经明日黄花的 grunt,bower 等,现在流行的打包工具有 webpack,parcel,以及未来可能流行的 snowpack,针对 vue 的 vite 等,如果可以直接一步到位当然谁都喜欢了,但是 snowpack 对我们这种已经存在三四年的工程确实兼容性是问题。 Parcel 最大的优点本来是免配置,但是这一点现在被 webpack 学去了不少。所以综合考虑下来 最稳妥的选择仍然是 webpack。webpack 5 虽然有很多新特性,但是仍然处于 beta 版。而且考虑到我们现有庞大的项目,稳定性是最重要的,最终决定选择 webpack 4。

遇到的问题

安装 webpack,以及一堆插件不提,只说遇到的常见问题。

babel 6和7的兼容性问题

babel 7是 break change,而且跟6严重不兼容,包括但不限于 @babel 命名域,pollfill 包,corejs 包,regenerater 包等等。具体可以参考 babel7升级指南

各种 找不到 default 属性的问题,原因是因为 babel 改变了模块的编译方法。需要引入 babel-plugin-add-module-exports 包解决。

css 处理的问题

原来的 extractTextWebpackPlugin 需要替换为 miniCssExtractPlugin.

启用 css-loader 的 CSSModule 功能.

其它

externals 与 js 模块(umd,commonjs,commonjs2等)的关系。参考 externals

htmlWebpackPlugin 的模板变量读取。参考 htmlWebpackPlugin.options

热更新的问题(现在仍然不完善,只能算是半个完成品)。

production 模式自带的 terserWebpackPlugin 压缩代码内存溢出的问题。最终解决是 mode 为 none,然后用自设的新版 terser 插件解决,怀疑是默认自带的插件 bug,网上的各种说法都有。

HardSourceWebpackPlugin 的代码缓存失效问题。自动删或者手动删。

预压缩插件 compressionWebpackPlugin 里面 gzip 算法与 zopfli 算法的选择。(参考 为什么应该用预压缩插件

最终效果

服务启动时间第一次比之前减少不多,大约4分之一,但是第二次第三次等等,后续启动时间比之前缩短90%的时间。

上线打包因为加入了预压缩等技术,时间有所延长,不过换来的是文件体积大幅缩小,不需要服务器 nginx 压缩,加载速度提升 30%左右。

时间原因,暂未引入 tree shaking 技术,不过已经为后续引入提供了基础条件。

最主要的是不再像之前的 dora 配置是个黑盒,我们现在是保持半开放,可以更加灵活的配置。

也算是部分跟上了时代的步伐。。。待续。。。