Hello, I’m Tree jam. The micro front-end system built before has been running steadily for nearly two years, and recently met some feedback from children. It was said that Qiankun doesn’t support Vite packaged apps, so I can’t use it?

Yes, there is no official documentation of Vite support. Next I will start with Vite and explain step by step how to integrate sub-applications built on Vite into the Qiankun micro front-end system.

1 Why Vite?

Before Vite came along, most of our front ends were built on WebPack, mainly due to the following two points:

  • Local development (hot update HMR)
  • Package online

The core of WebPack is simply the ability to bundle all kinds of resources together. But as the project iterates and evolves into a medium to large project, you find that packaging takes too long — in other words, the build becomes less efficient.

In the evolution of Bundle tools, we’ve seen webPack, Rollup, and Parcel, as well as a gradual increase in build efficiency, as shown below 👇

Is there a faster way to solve the build problem, with browsers becoming compatible with the ES module (ESM)?

That’s Bundless, based on the browser-supported ESM import feature, which leverages browsers for inter-module dependency loading without having to do it at compile time.

In other words, we no longer need to build a complete Bundle (hereafter we’ll call it Bundless). When we modify a file, the browser simply reloads a single file.

Ahle: What are the solutions to Bundless?

(See below) Vite is one of them. Review the advantages of Vite: 👇

  • In development mode: based on esBuild pre-build dependencies (reduce HTTP requests) + browser load corresponding modules, hot update page!

  • In production mode: Rollup based packaging, speed has also been improved

Once you experience the speed of Vite! You really can’t stop 🚀

🍚 After dinner thinking:

  • Isn’t esbuild faster than Rollup? Why not use esBuild in production mode? 👉

  • What happens to development mode for browsers that are not supported by native ESM? 👉

  • What about Bundless? Why prebuild dependencies with Esbuild? 👉

  • What are the Other Bundless solutions besides Vite? 👉

  • Vite’s goal is to kill Webpack? 👉

2. Micro front end framework Qiankun and Vite

From the above, we saw the advantages of using Vite. Will Qiankun support sub-application integration built on Vite? Here we use vue3+ Vite as an example

The following two problems need to be solved:

  • Development mode: In the development environment, if we use Vite to build vuE3 child applications, the Vite based build mechanism will carry type=module on the script tag of the entry file of the child’s HTML. As we know, the parent application of Qiankun introduced its child application. In essence, HTML was used as the entry file, and the resource list Js and CSS required by the child application was loaded through the import-HTml-entry library. Then eval was directly executed. In vite js, import and export are not transcoded, which will result in a direct error (it is not allowed to use import in scripts other than type=module)

  • Production mode: In production mode, since there is no runtime publicPath support such as __webpack_public_path__ in Webpack, in other words, vite does not support runtime publicPath, Its main function is to solve the problem of incorrect address of scripts, styles, pictures and other dynamically loaded microapplications.

🌲

At the beginning, import-html-entry will filter out files with type=module, resulting in the error of eval and final execution. Later, 👇 has been officially supported for this problem

  • Support of type=module and nomodule attribute in import-html-entry

At present, there is no documentation guide for sub-application packaging based on Vue3+Vite, but we can find some solutions in Github Issue, mainly through the following two ways

2.1 only addresses the integration of production modes

We can do this by building configuration modifications that apply vite configurations to children

First, modify the build configuration in Vite. Config. js·. The default Vite output target is module

Then introduce @rollup/plugin-html in the configuration file

See the Demo example at the end of this section for more details. The code is implemented to build an HTML file as an entry point to the child application, as shown below 👇

The other steps are similar to the WebPack-based configuration and will not be described here

While this approach can be integrated against the production model, there are several limitations:

  • We know that in order toqiankunGet the child appexportLife cycle function, so you need to package the child application intoumdFormat, while vitecode-splittingThe (code split) feature is not supportediifeandumdBoth formats will result in routes that cannot be lazily loaded.

  • Because Vite does not support runtime publicPath, the Base configuration can only be written out at packaging time

  • The image will eventually be packaged as Base64

More detailed Demo integration example: 👉 app-vue-vite

2.2 Solve the integration of development mode and production mode

It is also inconvenient to solve the production mode integration separately. After all, most of the time we need to debug in the local part of the process. Is there a way for Vite to support both modes of integration?

One of the open source authors on Github developed a Vite plugin called Vite-plugin-Qiankun, which enables the two modes to be connected under qiankun. It even retains the advantages of Vite building blocks

  1. Modify theVite.config.js

2. Modify the sub-applicationmain.ts, will the life cyclemount,bootstrap,unmountAnd so on through plug-in functionsrenderWithQiankunIn which exposure is completed. Other configurations are the same as the child application built on WebPack

⏰ Precautions:

  • Qiankun is officially named aswindow.__POWERED_BY_QIANKUN__To determine whether the current is in the Qiankun environment, and after the plug-in reference is passedqiankunWindow.__POWERED_BY_QIANKUN__To judge

🐸 Limitations:

  • It is still not supported in production modepublicPath, you need tovite.config.jsIn thebaseConfiguration write dead. The deployment of multiple environments is not convenient. Can’t combine like in Webpackwindow.INJECTED_PUBLIC_PATH_BY_QIANKUN + publicpathTo solve the

A more detailed Demo integration example: 👉 ViteApp

2.3 Vite support for Runtime PublicPath

At present, there is no relevant configuration in the official Vite document, but there is a plug-in called vite-plugin-dynamic-publicpath in Github. If you have a better solution, feel free to leave it in the comments section

2.4 Dotenv configuration for Vite

Note the Dotenv naming changes if you switch from vue-CLI to Vite

  • viteThe prefix isVITE_ ，vue-cli 是 VUE_APP_
  • The way to get it is also differentviteIs through theimport.meta.env, and invue-clibyprocess.env

3. The last

If you have other solutions, feel free to leave a comment in the comments section, or add me to wechat, and we will have a discussion over tea 🍵

Previous popular articles 📖 :

  • These Node open Source tools are worth owning
  • Developing visual Data Screens from 0 to 1 (PART 1)
  • Developing visual data Screens from 0 to 1 (part 2)
  • Construction of front-end Knowledge System of Tree Jam (PART 1)
  • Construction of front-end Knowledge System of Tree Jam (Part 2)
  • Talk about daily collaboration tools for front-end development
  • Babel configuration is stupid
  • How to better manage the Api
  • The interviewer asks you about Node
  • Front-end engineering stuff
  • Did you learn BFF and Serverless
  • Front-end operations and deployment

Hello, I am 🌲 tree sauce, please drink a cup 🍵 remember three lian oh ~

1. Remember to click a thumbs-up after reading oh, there is 👍 motivation

2. Pay attention to the interesting things at the front of the public account, and chat with you about the interesting things at the front

3. Github frontendThings thanks to Star✨