Record: Webpack5 wiped out the configuration file of micro-frontend qiankun

The beginning of the story

Starting from a BUG that is about to leave work, since the original department colleagues want to split several projects based on one project, we originally used the micro front-end mode of qiankun (base mode), and then splitting is actually relatively simple

It’s just that I upgraded webpack5 before the split this time, and the upgrade is relatively simple. I have taken it here.

The implementation process did not personally operate

The problem is coming. After the sub-application is upgraded to webpack5, when it is loaded and debugged locally through the dock, it suddenly fails to start.

Recurring problem

It's about to get off work, this matter has to be resolved, first reproduce

It is found that when the network panel loads the sub-application through the base, a js file 404 appears

This is very strange, because the sub-application can be started separately, and there is only one js file 404 when the sub-application is loaded by the base home, and it is an asynchronously loaded js, then you can judge that there must be a problem with the loading logic.

Debug in the sub-application and open the public-path file:

if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

It was found that these codes did not run when they were loaded through the micro-front-end docking mode! ! ! Is that the entire code is not executed

This js file is introduced at the top of the entry index.tsx file

If you have identified the problem, you are not afraid.

The core problem is: At that time, it was found that the __webpack_publicPath__ variable of the sub-application had not been modified, so the requested host was wrong, and the asynchronously loaded js file was 404.

Before troubleshooting this problem, I said in the group that if you have a problem, everyone should watch it together, so that you can learn something. Fortunately, I said this sentence and brought a few colleagues to listen to it.

One of my colleagues said, will it be tree sharking by webpack5?

I feel so, and then let them see how they configure this, so my colleagues made suggestions

Add this file to the sideEffects field in package.json

Then start the project again to solve the problem, and the public-path is loaded normally

---

Seemingly simple solution

The seemingly simple solution needs to locate the problem first, which will use the following points:

Familiar with the principle of micro front-end qiankun

Familiar with the principle of webpack and the principle of webpack dynamic lazy loading implementation

Familiar with the meaning of webpack's __webpack_pulicPath__ attribute

Know tree sharking

Understand the tree sharking configuration of webpack5

Explain the principles one by one

Principle of Micro Front End

You can see my previous handwritten micro-front-end article + source code: https://github.com/JinJieTan/Peter-/tree/master/chunchao

The core principle of the micro front end is: the base project sends a fetch request through the configuration information, takes all the resources of the sub-application and renders it as a dom node and inserts it into the container node. Then hijack the routing change event, trigger it on the base first, and then distribute it to other sub-applications

The principle of webpack asynchronous code segmentation

Synchronous and asynchronous code will be packaged into different js files. Since the asynchronously loaded js files are actually obtained through a network request and inserted into the page, the prefix of this asynchronous request can actually be set by the variable __webpack__pulicPath__

This is also the earliest realization of webpack5 federation module. You can dynamically load remote js files, as long as you control the prefix variable __webpack_pulicPath__

Micro front-end + asynchronous code segmentation, the core idea is: dynamic setting __webpack__publicPath__

Webpack5 tree sharking configuration

Tree shaking is a term usually used to describe the removal of dead-code in the context of JavaScript. It relies on the static structure features of ES2015 module syntax, such as import and export. This term and concept is actually popularized by the ES2015 module packaging tool rollup.

The official version of webpack 2 has built-in support for ES2015 modules (also called harmony modules) and unused module detection capabilities. The new official version of webpack 4 extends this detection capability. The "sideEffects" property of package.json is used as a mark to provide hints to the compiler indicating which files in the project are "pure (pure ES2015 modules)", which can be safely Delete the unused parts of the file.

The above is the official website document introduction

SideEffects and usedExports (more often considered tree shaking) are two different optimization methods.

sideEffects is more effective because it allows skipping entire modules/files and entire file subtrees.

usedExports relies on terser to detect side effects in statements. It is a JavaScript task and is not as straightforward as sideEffects. And it cannot jump to subtrees/dependencies because side effects need to be evaluated in the detailed rules. Although the exported function works as usual, the higher-order function (HOC) of the React framework will be problematic in this case

Now back to the code we were tree sharking just now:

if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;

__webpack_public_path__ can only be used when the asynchronous code js file is loaded after the code is compiled, so the code is cleared

So in order to solve this problem, we need to add the "sideEffects" property to package.json.

It is similar to / #__PURE__ / but it acts on the module level, not the code statement level. It means (referring to the "sideEffects" attribute): "If a module marked as having no side effects is not directly exported and used, the packaging tool will skip the side effects analysis and evaluation of the module.".

Skip the public-path file to side-effect analysis and evaluation, and directly package it to solve this problem

The tree-sharking document of : 16170d0ba80816 https://webpack.docschina.org/guides/tree-shaking/

end

A small problem seems to be easy to solve, but it is necessary to be familiar with the daily implementation principles in order to quickly locate the problem and solve it. This is the meaning of learning the source code and various principles.

Interested friends can go to my gitHub, these source code + articles are in https://github.com/JinJieTan/Peter- remember to give a star

Like friends, Peter help 06170d0ba8086f to watch/like it~