Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
Performance optimization concept
The concept of Webpack performance optimization is very large and mainly includes three aspects: build performance transport performance run performance
Building performance
By build performance, I mean build performance during development, not production
The goal of optimization is to reduce the elapsed time from packaging to code rendering
Build performance affects development efficiency. The higher build performance, the less time wasted during development
Transmission performance
Transport performance is the amount of time it takes to transfer packaged JS code to the browser
Consider the following when optimizing transport performance:
- Total transfer: The contents of all JS files that need to be transferred add up to the total transfer. The less duplicate code, the less total transfer
- Number of files: The number of JS files that need to be transferred when accessing a page. The larger the number of files, the more HTTP requests and slower the response time
- Browser cache: JS files are cached by the browser and will not be transferred
Running performance
Runtime performance refers to the speed at which JS code runs in the browser
It depends a lot on how do we write high-performance code
Never focus on performance too early, because you can’t fully predict the final performance at the time of development, and focusing on performance too early can greatly reduce development efficiency
Performance optimization mainly starts from the above three dimensions
There is no perfect solution to performance optimization; it needs to be done on a case-by-case basis