This is the 9th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Front-end engineering, when many people hear the word, they think of Webpack; That’s not wrong in today’s environment, but it’s not quite right either, because the concept of front-end engineering is much bigger than WebPack.

Now, many of you know the word webApp, we say webPage, our predecessor, we say webPage. With the update of the browser and the release of new HTML5 features, people began to expect webPage to have more power, and more interactive support. Many new concepts emerged, such as front-end routing, offline applications, webSocket, front-end storage, and front-end database (IndexedDB), as well as many new frameworks, such as Vue and React, which required front-end engineers to master more and more sophisticated technologies. In order to better develop front-end applications, engineering way of thinking, seems to become the general trend of the front-end direction.

What exactly does front-end engineering mean?

Personally, I think the front-end engineering will mainly include the following directions

  • Technology selection

    JS: At present, there are two main front-end development frameworks Vue and React. How a team chooses which framework is more suitable for them is a problem worth thinking about. Think about it based on the business and the environment you’re in. React is generally better suited for large projects because it involves more developers in terms of performance optimization, but also requires deeper developer expertise. Vue, on the other hand, is more suitable for webApp, suitable for complex applications with multiple user interactions. Compared with React, Vue has a lower learning cost.

    Build tools: WebPack is mainstream now, features are rich, and the community is very active, so it’s definitely the first choice. However, there are some relatively popular vites out there (see this article: Implementing a simple Vite development version), and with native ESM support in browsers, it is worth wondering whether Vite will overtake or even replace WebPack in the future. But there is still a very important point here, the engineering of the build, is required to be stable, do not spend too much time on non-primary business

  • To regulate

    A large project must be co-developed by many people, so it is necessary to formulate a unified specification, otherwise everyone has his own format and specification, whether the efficiency of ten people is comparable to a healthy and complete specification of three teams is a problem.

    Development specification:, can be handled with EsLint

    Commit specification: Can be handled with husky + CommitLint

    Comment specification: jsDoc can be used uniformly

    . , etc.

  • Test, deploy, monitor

    In terms of testing, it probably refers to the self-testing of the code. How to make project members complete the self-testing of the code as much as possible is also a matter that needs to be considered.

    Deployment, here temporarily divided into: development environment deployment and production environment release deployment.

    During the development phase, how to make members more efficient and simple to complete business development, such as visual page creation, MockServe support, and multi-environment (test, UAT, PROD) switching

    In the production environment, features such as automatic build after code submission, switching between versions, one-click deployment, error monitoring after launch, performance monitoring, and buried data viewing also need to be supported and considered

  • Performance optimization

    Rendering performance: As we all know, JS operations on the Dom will cause page redraw, so we should minimize Dom operations when writing code. However, Vue and React have dealt with these problems. For long lists, multi-data pages, lazy loading, or paging loading.

    Code performance: It is necessary to separate modules that are loaded repeatedly into a single file; For functions that can be triggered continuously, throttling and anti-shaking are also necessary. In the structure of the code, the design of the file level, to be based on semantic, easy to understand considerations to do

    Network performance: effective use of the browser cache is necessary, can be CDN; Server-side rendering can also be considered if the page rendering speed is high

  • refactoring

    As the business evolves, refactoring is also possible; From the previous SPA mode, it may need to change to the FORM of MPA multi-entry and multi-module according to business and module.

summary

Therefore, front-end engineering contains a lot of things, and Webpack is just a bridge to make engineering better. The technology selection, specification formulation, deployment, performance optimization and network optimization mentioned above can be basically reflected in the configuration of Webpack.