sonar 扫描vue目录_「vue模块化按需编译，突破编译瓶颈」实战篇

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

github 项目地址：https://github.com/lisiyizu/vue-dynamic-module-example

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

webpack-virtual-modules：https://github.com/sysgears/webpack-virtual-modules

require.context： https://webpack.js.org/guides/dependency-management/#require-context

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

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

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

什么是模块化？

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

Feature-First 文章推荐：https://juejin.im/post/5cb00b1c6fb9a068a256b37c?from=timeline&isappinstalled=0

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

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

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

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

3: vue.config.js ：

• 创建 webpak-virtual-modules 模块

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

模块化按需编译的实际效果对比，可以看出 已经不存在编译慢的问题了，无论你的项目模块文件有多少，实际上就是一个模块的量级。我司模块数已经达到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 serve 和 npm run build。当我们在执行 npm run serve 和 npm run build 的时候，都是全量编译 和 全量打包发布的。以前我们总觉得极致的去优化webpack配置达到解决编译慢的问题。其实我们可以考虑去做模块化。因为我们只有清楚的分清哪些是我们该编译，哪些不该编译的，才能真正找到性能编译慢的源头。

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

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

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