The good articles encountered in front-end engineering are briefly summarized here. The core points and main concepts are briefly summarized here. The core here is that it does not represent the core elaboration of the original text for me, so it is convenient for quick reference. For detailed explanations, please refer to the original text.
For front-end engineering, I have not yet formed a knowledge system, so I will simply list the knowledge points first. If one day I suddenly get enlightened, I will use my own ideas and understanding to run through them.
1. The difference between hash and chunkhash in Webpack, and the hash fingerprint decoupling scheme of js and css
Original link: http://www.cnblogs.com/ihardcoder/p/5623411.html
Main points: Introduce Webpack's hash fingerprint related content, the core points are the differences between hash, chunkhash, and contenthash
1、hash：
Simply put, hash is a project-level hash
hash is calculated by the compilation object
The compilation object represents the compilation process corresponding to a certain version of the resource. A compilation is created every time a change to the project file is detected
That is to say, any file modification in the project will cause changes to the compilation object, thereby changing the hash value.
2、chunkhash
Simply put, chunkhash is a file-level hash
chunkhash is the hash value calculated based on the content of the specific module file
That is to say, changes to a file will only affect its own hash fingerprint and will not affect other files.
3、contenthash
Simply put, the function of contenthash is to decouple js and css fingerprint hash calculation
By default, webpack compiles all js/style files into one js file, so that the result of the chunkhash configuration compilation is that the hash fingerprints of the js and css files are exactly the same. Regardless of whether the js code or the style code is modified separately, the compiled output js/css file will be marked with a new and identical hash fingerprint. In this case, we can't compile and output CSS separately and put hash fingerprints, so we can't effectively manage version and deploy online.
However, the style files can be compiled and output separately with the help of extract-text-webpack-plugin, which provides contenthash. contenthash represents the hash value of the content of the text file, that is, only the hash value of the style file
2. Articles related to componentization and modularization
Componentized development of web applications: http://blog.jobbole.com/56161/
Front-end component development practice: http://web.jobbole.com/82689/
Large-scale front-end componentization and modularization: http://www.infoq.com/cn/news/2014/04/front-end-modular
3. How to develop and deploy front-end code in large companies?
Original link: https://github.com/fouber/blog/issues/6
Key points: Evolution of abnormal front-end performance optimization for large companies
1, html+css no compilation
Problem : CSS requests every time, status code 200
2. Local cache: 200->304
Problem : 304 Negotiate cache, and also communicate with the server once
3. Force local cache (cache-control/expires), no communication
Question : How the resource change cache is updated
4. Modify the reference resource path: path + version
Problem : One file change, all caches are invalidated
5. Using the data digest algorithm, the version is accurate to the file level
Problem : Cluster Deployment of Static Resources and Dynamic Web Pages
6. Static resource CDN deployment
Question : When updating, do you deploy web pages first, or static resources?
7. Use the summary information of the file to rename the resource file, use the new file for non-coverage publishing, deploy static resources first, and then deploy the page in grayscale
Overall strategy:
-
Configure long-term local cache - save bandwidth and improve performance
-
Use Content Summary as Cache Update Basis - Precise Cache Control
-
Static resource CDN deployment - optimize network requests
-
Change the resource release path to achieve non-coverage release - smooth upgrade
Notice:
Cache control of static resources requires this processing to be done at the location where all static resources are loaded on the front end
Including js, css files and the resource paths referenced in them
As the abstract information is involved, the abstract information of the referenced resource will also cause the content of the referenced document itself to change , thus forming a cascade of abstract changes.
The schematic diagram is as follows
Fourth, front-end engineering - basics
Original link: https://github.com/fouber/blog/issues/10
Key Points: Four Stages of Front-End Engineering Construction
1. The first three stages
Stage 1: Library/Framework Selection
Technology selection, reduce engineering
Stage 2: Simple Build Optimization
After the development stage, to improve the running performance ( running efficiency ): compression, verification, resource merging...
The third stage: js/css modular development
Divide and conquer to improve maintenance efficiency
2. The fourth stage: component development and resource management
Significantly improve development efficiency and take into account operational performance
2.1 Componentization
Componentized core:
- Separate viewable/interactive areas
- The resources required by the component are located in the same project directory nearby
- Components are independent (not coupled) and can be combined at will
- A page is just a container for components
- When components are not needed or replaced, entire directories can be deleted/replaced
Componentization benefits
- The functions are divided and conquered, and there is no timing dependency between developers, improving the efficiency of parallel development
- Allow new members to join at any time to claim component development or maintenance work
- Support multiple teams to work together
Front-end project development concept division
| name | illustrate | Example |
|---|---|---|
| js module | Independent Algorithms and Data Units | Browser environment detection (detect), network request (ajax), application configuration (config), DOM manipulation (dom), utility functions (utils), and JS units in components |
| CSS Modules | Standalone functional style unit | Grid system (grid), font icons (icon-fonts), animation styles (animate), and CSS cells in components |
| UI components | Independent visual/interactive functional unit | Header (header), footer (footer), navigation bar (nav), search box (search) |
| page | The interface state of the front-end GUI software is the container of UI components | Home page (index), list page (list), user management (user) |
| application | An entire project or an entire site is called an application and consists of multiple pages |
Front-end project structure (you can know the guide project directory structure)
- A web application consists of pages
- Pages are made up of components
- A component consists of a directory, and resources are managed nearby
- Components can be combined
- Component's JS can depend on other JS modules
- CSS can depend on other CSS units
2.2 Resource management
To be continued...