origin
I have been struggling with whether to post this article, because now this solution can be used except for a few companies that need an online IDE, and most companies are not worth spending a lot of manpower and material resources on this, because I always think that technology is better. If the company's business is doing service, it is best to publish articles that everyone can use!
Why did I decide to post this article in the end, because the editor will do a lottery every time before writing an article, and finally this article is shaken, so post it according to the rules!
topic analysis
We know that webpack actually utilizes the capabilities of node to a large extent, so this title can actually be transformed into how to make browsers have the capabilities of node. Last year, because of the company's business relationship, I did a similar test and found that the node module was castrated on the browser! This is actually divided into two steps. In the first step, we can replace some modules of node with some capabilities of the browser. In the second step, we can find corresponding libraries to replace other modules of node, so as to realize the capabilities of node on the browser!
How does webpack run
This problem is actually the operating principle of webpack. I won’t introduce it in detail here. I will roughly talk about the principle: through the entry file and a series of configuration rules, the source file is converted into the corresponding js and other files after compilation, and then output!
webpack in node environment and browser environment
After listening to the sharing of a group of big guys, I understood the gap between myself and the big guys, and also knew how to deal with this problem in the browser environment!
In fact, the following points are more important:
- Built-in module loading, such as path, resolve, http, vm, etc.
- File system, packaging and processing each source file
- On-demand loading, processing on-demand loading files such as node_modules
- optimization
Built-in module loading
This can be handled by a third-party library, and you can search for it yourself, such as node's path module, and browsers can polyfill it with path-browerify.
File system
To put it bluntly, the browser cpu has limited memory resources, so it must be read and written. We can use some capabilities of the above browser and some modules of the simulated node to obtain the corresponding information of the file. Children's shoes can understand that the browser at this time already has most of the capabilities of node and can read and write files. Here I recommend Memfs, webpack-dev-server uses it as the core, because it uses buffer processing when reading and writing files, what we need to do is to write a method so that it can process files at high speed! How to write the specific method, you can refer to the fs module of node, which is to find the corresponding file through the path, create the file if there is no file, and then assign the content directly, and add attributes such as timestamp to the stat of the file!
load on demand
There is no more introduction here, you can refer to the modules in node, loader.js under cjs in the lib directory, and process it to see that node is still quite humanized!
optimization
When the browser runs webpack, because the browser is single-threaded, it will freeze, so we suggest to open a sub-thread for the smoothness of the UI, use Worker, and use postMessage to send back the packaged result!
The above step is almost done. We need to continue to the next step, real-time update, that is, HMR implementation. Otherwise, changing a place and repackaging will not only consume resources, but also reduce customer experience!
The solution is also simple. To intercept the update file of webpack HMR, just write an interceptor to process it! It can be regarded as improving performance!
end
Knowing is difficult but doing is easy, many things just need to be done and tried to know if it will work! Now the front-end can do a lot of things, no longer limited to page development, and the future development of the front-end will be even better! Thanks again to all the big guys for sharing, which solved a lot of confusion for me! If you like my article, pay attention!