# Code package volume optimization
The most direct means of initiating performance optimization isReduce code package size, the code package size directly affects the download time and affects the user's experience when launching the Mini Program.
Developers can optimize the package size by:
# 1. Reasonable use of subcontract loading
Recommended for all Mini programs
use **Subcontract loading It is the most obvious means to optimize the startup time of Mini programs.**It is suggested that developers should divide the Mini Program pages into different sub-packages according to the frequency of use and the scene, so as to load the code package on demand.
Subcontract loading has the following advantages:
- Carrying more functionality: The maximum volume of a single code package for an Mini Program is 2M, the use of sub-packageing can increase the maximum volume of Mini Program code packages, carrying more functions and services.
- Reduce code package download time: The use of sub-packageing can significantly reduce the size of the code package that needs to be downloaded at startup, and effectively reduce the start-up time without affecting the normal use of functions.
- Reduce the Mini Program code injection time: if not open[Injection on demand]((ability/lazyload#Injection on demand)), the Mini Program compiles with all the js The file is packaged into the same file for a one-time injection and executes the code for all pages and custom components. Subcontracting reduces the amount of code injected and actually executed, thus reducing injection time.
- Reduce page rendering time: Use sub-packageing to avoid unnecessary component and page initialization.
- Reduced memory footprint: Subcontracting reduces memory footprint by enabling coarse-grained on-demand loading of pages, components, and logic.
In addition, combined with several extended features of subcontract loading, start-up time can be further optimized:
Some scenes in the Mini Program (such as advertising pages, active pages, payment pages, etc.) usually have less complex and relatively independent functions, and have high requirements for startup performance. A standalone subcontract can operate independently of the main and other sub-packages. There is no need to download the main package when accessing the Mini Program from the standalone subcontract page. Developers are advised to place some of the pages that require high startup performance in a special independent subcontract.
In the use ofSubcontract loadingAfterwards, although it can significantly improve the startup speed of the Mini Program, when the user jumps to the page within the subpackage during the use of the appletch, they need to wait for the subpackage download to be completed before they can enter the page, causing a delay in page switching and affecting the Mini Program usage experience. Subcontract Pre-Download is designed to address the latency of the first entry to the subcontract page.
Independent sub-packageing and sub-packageing pre-downloading can be used together for better results, please refer toIndependent Subcontracting and Subcontract Pre-Download Tutorial
Subcontract asynchronySubcontracting Mini Programs from page granularity to component or even file granularity. This allows parts of the plug-ins, components, and code logic that would otherwise only be placed on pages within the main package to be stripped down to sub-packages and loaded asynchronously at runtime, further reducing the package size and the amount of code required to start up.
The asynchronous subcontract can solve the problem of oversize of the main package effectively.
# 2. Avoid non-essential global custom components and plug-ins
in app.json Adopted in usingComponents Custom components referenced globally and defined by the plugins Globally introduced plug-ins that are downloaded and injected with the main package when the Mini Program starts JS Code, affecting the boot time.
Even though extensions and some official plugins do not take up the main package size, they still need to be launchedDownload and Injection JS code, the impact on startup time is no different from other plug-ins.
- If a custom component is only used in a subcontracted page, it should be defined in the page's configuration file
- Globally introduced custom components are considered required for all sub-packages, all pages, and can affectInjection on demandThe effect and time consuming of Mini Program code injection.
- If the plug-in is used only in a subcontract, use only[Referencing plug-ins in sub-packages]((framework/plugin/using#percent E5%9C%A8%E5%88%86%E5%8C%85%E5%86%85%E5%BC%95%E5%85%A5%E6%8F%92%E4%BB%B6%E4%BB%A3%E7%A0%81%E5%8C%85))
- For example, many Mini programs will useMini Program LivePlugins, but live streaming is usually not used in the main package page or is low frequency, in which case it is recommended to introduce through sub-packageingMini Program LivePlugins.
- If you really need plug-ins that are used in the main package or by multiple sub-packages, you can still consider placing plug-ins in a subcontract and passing theSubcontract asynchronyThe form ofAsynchronous introduction。
# 3. Control the source file within the code package
The Mini Program code package is downloaded using the ZSTD Image, audio, video, font and other source file will take up more code package volume, and is usually difficult to be further compressed, which has a much greater impact on download time than the code file.
Developers are advised that the images in the code package should generally only contain some smaller icons. WXSS Used in base64 Inline too many or too large source files, such as pictures. Such files should be deployed as far as possible to CDN, and use the URL Introduction.
# 4. Clean up useless code and resources in a timely manner
Except for files that are ignored by the tool by default or explicitly ignored by the developer, Mini Program packaging will push all files in the project directory into the code package. Accidental introduction of third-party libraries, deprecated code or dependencies in version iterations, test code not needed in production,Unused components, plug-ins, extension libraries, these files and resources that are not actually used are also entered into the code package, which affects the size of the code package.
It is recommended to use the WeChat Developer Tool[Code static dependency analysis]((Devtools /codeanalyse)), from time to time to analyze the file composition and dependencies of the code package in order to optimize the code package size and content. For files that should not be included in the Mini Program code package for local development debugging only, you can use the toolset [packOptions.ignore]((Devtools /projectconfig)) Configure the ignore rule.
Using packaging tools such as Webpack、Rollup Etc.) when preprocessing Mini Program code, you can take advantage of the tree-shaking Remove redundant code, but also take care to prevent the introduction of unwanted libraries and dependencies when packaging.