「vue模块化按需编译,突破编译瓶颈」实战篇

12,821 阅读3分钟

今天偶然看github,看到了一个叫 webpack-virtual-modules 的项目,进去看了一下当时我就被它的设计给震惊了。这让我觉得不可思议,原来还可以这么玩。随后我便顺手把之前的模块化按需编译方案改进了一下,发现真的太爽了。这篇文章可能是在掘金第一篇普及实践webpack-virtual-modules的文章。建议小伙伴去看看这个项目(webpack-virtual-modules),可能会给你带来一些灵感和思路~

github 项目地址:github.com/lisiyizu/vu…

this project is inspired by webpack-virtual-modules + require.context

webpack-virtual-modules:github.com/sysgears/we…

require.context: webpack.js.org/guides/depe…

可能有人要问,为啥要整这么麻烦,为啥不直接使用dynamic import方式呢?

答案: 那是因为它有副作用,会转换成正则匹配,目录全部扫描一遍。我们只有把动态扫描目录,转成静态确定的目录告诉webpack,这样才能去让它明确的去做按需模块化编译。webpack-virtual-modules正好能做这件事。我相信它的出现太重要了。顺便多说一句,webpack中我们可以使用DefinePlugin可以去动态注入全局变量。而webpack-virtual-modules可以动态注入虚拟模块文件,这个确实很惊艳。它可以解决dynamic import带来的问题。

欢迎小伙伴点赞👍👍👍支持废话不多说了,准备上干货!!!!!!

什么是模块化?

如图所示模块(建议小伙伴们可以按照 Feature-First方式去规范模块)

Feature-First 文章推荐:juejin.cn/post/684490…


vue 模块化按需编译项目改造

1:首先我们要按照规范去定义最小粒度可编译模块,如src-modules文件夹里定义的目录,我们称它为一个可编译的模块。这是模块化编译的关键。

2: import-dynamic-modules.js 文件作用:

  •  获取 webpak-virtual-modules 编译模块 
  • 动态创建模块: router、store

3: vue.config.js :

  • 创建 webpak-virtual-modules 模块 (node_modules/vue-dynamic-modules.js)


模块化编译带来的巨大收益!

模块化按需编译的实际效果对比,可以看出👀已经不存在编译慢的问题了,无论你的项目模块文件有多少,实际上就是一个模块的量级。我司模块数已经达到60多个了,npm run serve 一次编译大概是3850多个文件,大改40s-60s多之间。采用模块化编译的方案,基本上能达到一次编译只需13s-18s之间。而且不会因为项目模块的多少,影响编译性能。

下面是 vue-dynamic-module-example 测试项目的编译情况:

npm run serve --module=bar 编译时间:2788ms

npm run serve serve                编译时间:6268ms


下面是我司真实项目的编译情况:

npm run serve --module=bar 编译时间:13s

npm run serve serve 编译时间:60s



不知道大家发现没有,其实编译性能慢的罪魁祸首就是:npm run servenpm run build。当我们在执行 npm run serve 和 npm run build 的时候,都是全量编译 和 全量打包发布的。以前我们总觉得极致的去优化webpack配置达到解决编译慢的问题。其实我们可以考虑去做模块化。因为我们只有清楚的分清哪些是我们该编译,哪些不该编译的,才能真正找到性能编译慢的源头。

如果你还在为项目大编译慢而苦恼的话,可以使用这种方式终结了,改动非常小。

如果你觉得还可以,欢迎点赞👍👍👍支持、留言评论。

笔者正在观望工作机会,本人在北京,有坑位欢迎推荐。