Today, I happened to visit Github and saw a project called Webpack-Virtual-Modules. I went there and was shocked by its design. It struck me as amazing that it was possible to play this way. I then tweaked my previous modular on-demand compilation scheme and found it really cool. This article is probably the first in nuggets to popularize the practice of Webpack-virtual-Modules. I suggest you check out this project (Webpack-virtual-Modules), which may give you some inspiration and ideas ~

Github project address: github.com/lisiyizu/vu…

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

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

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

One might ask, why bother, why not just use dynamic import?

Answer: That’s because it has the side effect of converting to a regular match and scanning the entire directory. Only by telling WebPack that the dynamically scanned directory is converted to a statically determined directory can we make it explicit to do on-demand modular compilation. Webpack-virtual-modules does just that. I believe its emergence is too important. By the way, we can use DefinePlugin in Webpack to dynamically inject global variables. Webpack-virtual-modules can dynamically inject virtual module files, which is really amazing. It solves the problem of dynamic import.

Welcome small partners to praise 👍👍👍 support, nonsense not to say, ready to dry goods ！！！！！！

What is modularity?

The module as shown in the picture (it is suggested that you can standardize the module according to feature-first mode)

Feature-first article recommended: juejin.cn/post/684490…



Vue modular on demand compilation project transformation

1: First we define the minimum granularity of the compilable module according to the specification, such as the directory defined in the src-modules folder, we call it a compilable module. This is the key to modular compilation.

2: import-dynamic-modules.js file

  • Get the Webpak-virtual-modules compiler module
  • Dynamically create modules: Router and Store

3: Vue. Config. Js:

  • createWebpak – virtual – modules module (node_modules/vue – dynamic – modules. Js)



Modular compilation brings great benefits!

A practical comparison of modular on-demand compilation shows that 👀 no longer has the problem of slow compilation. No matter how many module files your project has, it is actually the magnitude of a module. Our module number has reached more than 60, NPM run serve a compilation is about 3850 more files, big changes between 40s-60s. Using modular compilation scheme, basically can achieve a compilation only between 13s-18s. And it does not affect compilation performance because of the number of project modules.

Here is a compilation of the vue-dynamic-module-example test project:

NPM run serve –module=bar2788ms

NPM Run serve Serve Compile time: 6268ms



The following is the compilation of our real project:

NPM run serve –module=bar

NPM Run serve Serve Compile time: 60s





NPM run serve and NPM run Build are the main culprits for slow build performance. When we execute NPM Run serve and NPM Run build, both are fully compiled and fully packaged for release. In the past, we thought it was best to optimize the WebPack configuration to solve the problem of slow compilation. In fact, we can think about modularity. It is only by being clear about what we should compile and what we should not compile that we can really find the source of performance compilation slowness.

If you are still frustrated by the slow compilation of your project, you can use this method to end the project with very few changes.

If you think it’s ok, please like 👍👍👍 and leave a comment.

I am looking for job opportunities, I am in Beijing, there is a pit welcome recommendation.