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


今天偶尔看github,看到了一个叫webpack-virtual-modules的项目,进去看了一下其时我就被它的设计给震动了。这让我觉得不可思议,原来还能够这么玩。随后我便顺手把之前的模块化按需编译方案改进了9 [ R b c 0一下,发现真的太爽了。

github 项目地址:github.com/lisiyizu/vu…| 4 H y L 1

this project is inspired by webpack-virtual-modules + rr q s 8equire.context

webpack-viK I z ~ E irtual3 d 9 J w 6-modules:github.com/Y 7 I jsysgears/we…] ^ h m q

requiR t G E % Hre.contl 0 k t 6 o 3ext:webpack.js4 k j K e n V.org/guides/ded g h / O e Fpe…

或许有人要问,为啥要整这么P g 5 K K 5 麻烦,为啥不; g T m 直接运用dynamic import方式呢?

答案: 那是由于它有副效果,会转换成正则匹配,目录全部扫描一遍。咱们只有把动态扫描目录,转成静态确定的目录告诉webpack,这& X T w W l &样才干去让它* & O g 0 , C明确的去做按需模f ~ P 2 h块化编译。webpack-virtual-modules正好能q j e 3 8做这件事。我信任它的出现太重要了。趁便多说一句,webpack中v C S咱们能够运用Defl | :inePlugin能够去动态注入全局变量。而webpack-virtual-mof | . % E ? o Wdules能够动态注入虚拟模块文件,这个的确很惊艳。它能够解决dynamic import带来的问题。

主张小伙伴去看看这个项目(webpacx u W e / Q & X 7k-virtual-modules),或许会给你带来一些创意~

欢迎小伙伴K n u n点赞支撑废话不多说了,预备上干货!!!!!!

什么是模块化?

如图所示

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

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

1:首要咱们要按照规范去界说最小粒度可编译模块,如src-modules文件夹里界说的@ 8 c 0 O目录,咱们称它F ? Y为一个可编译的模块。这是模块化编译的F i `关键。「vue模块化按需编译,突破编译瓶颈」实战篇

2: import-dynamic-modules.js 文件效果:

  • 获取 webpak-virtual-modules 编译模块
  • 动态H % ` 4 / W S A (创立模块: router、store

「vue模块化按需编译,突破编译瓶颈」实战篇3:vue.config.js :

  • 创立webpak-virtual-modules 模块

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

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

模块P n g化按需编译的实际效果比照,能够看出现已不存在编译慢的问题了,无论你的项目模块文件有多少,实际上就; _ ? { O X b k是一个模块的量级。我司模块数现已到达60多个了,npm run serve 一次编译大概是3850多个文件,大改40s-60s多之间。采用模块化编译的方案,基本上能到达一次编译只需13s-18s之间。而且不会由于项目模块的多U h f o少,影响编译功能。

下面是vueG B } 5 K E-dynamic-module-example测试项目的编译状况:

npm run serve –module=bar 编译时刻:2788ms

npm run serve serve 编译时z ( b V r . { l h刻:6268msy E ) M

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

下面是我司实在项目的编译状况:

npm run serve –module=bar 编译时刻:13s

npm run serve serve 编译时刻:60s

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

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

不知道大家发现没有,其实编译功能慢的元凶巨恶就是:na g f A J cpm run servenpm run build。当咱们在履行 npm run serve 和 npm run build 的时分,都是全量编译 和 全量t J ` X # l } (打包发布的。以前T Z ! $咱们总觉得极致* L a j的去优化webpack配置到达解决编译慢的问题。其实咱们能够考虑去做模块化。由于咱们只有清楚的分清哪些是咱们该编译,哪些不应编译的,才干真正找到功能编译慢的源头。) ] f

假如你还在为项目大编译慢而苦恼的话; ( 3 W ~ O,能够运用这种方式终结了,改动十分小。

假如你觉得还能够,欢迎点赞支撑、留言谈论。

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

发表评论

提供最优质的资源集合

立即查看 了解详情