Yang Yizhen, the platform support group of wedoctor front-end Technology Department, is the most Open front-end team in the universe
This post will be updated as part of the series.
directory
| The title | The module | content |
|---|---|---|
| How can you not know AST? | public | The principle of analysis |
| 90 lines of webpack, are you sure you don’t want to learn? | webpack | Simple and easy to implement |
| Swastika: This article is enough about Sourcemap | webpack | The principle of analysis |
| [Webpack] devServer experiment Report | webpack | The principle of analysis |
| 120 lines of code to help you understand the HMR mechanism under Webpack | webpack | The principle of analysis |
| Talk about Tapable | webpack | The principle of analysis |
| Webpack – How to write a loader/plugin | webpack | Simple and easy to implement |
| Webpack implements Tree Shaking from the past | webpack | The principle of analysis |
| Webpack “learn code splitting from 0 to 1 | webpack | The principle of analysis |
| Webpack best practices | webpack | Simple and easy to implement |
| Module Federation Your romance I understand | webpack | The principle of analysis |
| Vite supports React | vite | The principle of analysis |
| Stand at the forefront of the trend, quickly implement a simple version of vite | vite | Simple and easy to implement |
| Learn Vite devServer in 10 minutes! | vite | The principle of analysis |
| 【 Vite 】 Tips you don’t know, are you sure not to read? | vite | The principle of analysis |
| How can Vue 2 systems quickly migrate Vite as a development tool | vite | Simple and easy to implement |
| Where does the useless code go? Tree-shaking project rollup | rollup | The principle of analysis |
| Rollup – Build principle and easy implementation | rollup | Simple and easy to implement |
On the micro medical
Wedoctor is an international leading intelligent digital health platform, headquartered in Hangzhou. With the mission of “There is a way to health and it is not difficult to seek medical care”, WeDoctor has been committed to promoting the digitalization and intellectualization of China’s medical and health industry through innovation and science and technology for ten years, providing high-quality, efficient and accessible medical and health services for the whole society and protecting the health of millions of people.
At present, the front-end technology department of Wedoctor has more than 90 front-end partners, responsible for the product research and development of wedoctor Group in the whole end, the whole stack and the whole scene. The main technology stacks are Vue (SSR), React (RN) and Node (BFF). We advocate the engineer culture, explore the technical limits, and devote ourselves to making good changes in the national medical health by using codes!
Column series program
Why a column series
- Brainstorm with many people, study and output the complete system, and improve the technical atmosphere
- Summarize internal best practices, improve the overall level of the company, feedback structure
The end of time
- It is scheduled to end by the end of June (q2)
Why build architecture
Interviewing is a weak spot
Post some interview questions
- Talk about webpack optimizations and how you are familiar with them
- Tree-shaking principles, what are side effects, and how it behaves differently in rollup and Webpack
- How does webpack work and how does it work, dynamically load, cache, and rollup
Apart from our daily development, this detail is rarely used, so it is very easy to touch the knowledge blind area without systematic learning
The whole system is bigger
I believe that many people have tried to learn Webpack before, but they always forget it (there are a lot of documents on the official website). It takes time and effort to master the system and it is not easy to remember.
At the same time, it is easy for the author to end the series badly, because it takes a lot of time to research and learn. But it is particularly suitable for our collective research and output.
Construction foundation
Contains the
- To optimize the project
- Engineering capabilities
- Compilation principle
- Architecture plan
Whether it is process or efficiency improvement, it is the technical capacity reserve that the team cannot escape.
column
Ps. Multi-person collaboration, modular division of labor, due to business growth leads to inconsistent scheduling, so articles may not be produced in order, but each article is independent and does not affect the reading experience, you can also start from the beginning to collect and fatten up.
The whole column will be carried out with Webpack5, Vite and rollup as the core, from the basic principle analysis of the framework to our own implementation and finally some best practices and explorations of architecture level of our company.
- Building the foundation: Introduce the current popular tools
- Gradually in-depth: principle analysis and simple implementation respectively
- System establishment: common ground analysis and differentiation contrast refining the entire construction system
- Practice internalization: the company’s best practices and practice exploration
What do you get out of it
Students at different stages can harvest
- Build awareness: Clearly understand what build is, why build, and the differences between different build tools
- Interview knowledge: the freshest principle analysis, what steps did the whole construction process go through and what did it do
- The fastest entry: quickly build, optimize the construction of the solution, take away the configuration of the case
- Infrastructure reserve: provide some pit cases, the company’s internal exploration, maybe you have inspiration, welcome to discuss
Construct an evolutionary history
The Stone Age
Node was not yet popular, and at that time the front end was mostly dynamic.
In a slightly more complicated scenario, our business code (JS, CSS) will be manually compressed using code compression tools (the online version is available on this website), and the version such as jquery.min.js will be confused, and finally put into THE CDN. At this time, only manual integration and packaging products will be available.
We implemented the original modularity concept by using immediate function expressions (IIFE) to avoid contaminating the global execution environment by using some third-party modular approach, but the order of dependencies and conflicts between them remained.
We have desensitized code and reduced volume, but we still have a lot of manual cleaning, so we need ease of use; The concept of modularity still requires more fine-grained decoupling.
The Bronze Age
AMD & CMD — aside, modular
Browsers can’t use CommonJS, making it possible for the two modular specifications that replace it, require.js (AMD) and Sea-.js (CMD), to shine. Using these two solutions can help us effectively break up and organize code, taking the crude modularity approach a step further and giving birth to the concept of dependency and structure.
This is a very important pain point that affects the Bundle pattern.
Agricultural era
The popularity and maturity of Node brings building closer.
At this time, the concept of front and back end separation has gradually become clear, and the front end starts to separate from the server code or Framemaker and carry out project maintenance and package by itself.
Nodejs was born with the advent of NPM and CommonJS, and the “modularity” of the last era was naturally supported. With the concept of modularity, various third-party libraries have mushroomed.
ES6
Import /export is the Esm modularity specification proposed by ES6. With the introduction of ES6, the battle between AMD and CMD is finally over, and it also speeds up the bundle’s additional functionality, compiling (Babel).
The online compile time is too long, affecting the experience. Can we save the compile time in the pre-package phase?
The birth of the packaging tool
The core of webpack, Grunt, GLUP, etc., are module packers that precompile and integrate files through a series of actionable configurations.
These packaging tools vary in configuration. Grunt automates tasks, WebPack is configured by capability, and GLUP is configured by working stream chain invocation.
The use of posture has its own strengths and weaknesses, supporting ecology is the key factor.
Webapck takes the high ground with strong code Splitting and low barriers to configuration.
At this point, the bundle is only responsible for the output of the end product. With the complexity of the business, you can’t package and deploy in a different environment every time, right? Multiple scenarios and multiple environments require more capabilities to meet our development efficiency.
The Industrial age — now
To put it simply, it is engineering. At the same time, the pursuit of higher levels such as experience, compatibility, performance and multi-environment needs packaging tools to gradually upgrade.
Combined with the NPM ecosystem, these are not a problem, so some people laughed at the configuration engineer.
Webpack began its metamorphosis as a module packer, and because of its open design, it was repackaged by many tools as the underlying layer.
Vue-cli, create-react-app, umi
With the rise of VUE and React, automation tools are gradually coming into view. They are easier to use, and more configuration is integrated into the tool by default, reducing the mental burden.
Covering every lifecycle from source code to build artifacts, supporting various functional extensions and business requirements (up to UMI).
rollup
ES6, hooks configuration is lighter, TreeShaking effect is better, our company’s current development SDK and tool library are using it to quickly work.
Future – bundless
Vite, snowpack
The end brings the front end closer to the user, its progress determines the progress of the front end, the browser side has supported ESM (script type attribute set to module), we can be more happy straight out (different from the middle out).
However, due to compatibility issues, we still can’t use ESM directly in production (depending on the business scenario) and will eventually need to package (vite also does this in production using rollup), which will be improved in the future (HTTP2, terminal iteration).
Some of our projects have also started using Vite, and the smooth startup and hot update speed is amazing.
module federation
Webpack5 takes a leap forward and uses module sharing as a starting point to re-minimize the compilation problem. It builds ahead of time and uses dll-like methods to introduce and execute in the project. Rather than improve the packaging speed, it is to adopt the concept of “cloud” code, which belongs to the cross-application separation, leaving a lot of imagination space in business reuse, micro-front-end and other scenarios.
conclusion
To summarize the core factors of evolution throughout the decade of rapid front-end development:
faster
- packaging
- Straight out of the load
smaller
- Split granularity
- Optimization scheme
Easier to use
- Rich ecological
- Configure the integration
conclusion
The reason why I introduced the history of builds in the beginning is that I hope you can see that as the whole front-end technology evolves, the problems we encounter and the solutions we come up with have a tremendous impact on our technology.
Quick question: what build tools are you using now and what problems have you encountered? Feel free to discuss them in the comments
Bookmark the entire series of columns now
Don’t forget to like, pay attention to, forward and comment on me