One, foreword
This article is aimed at “The following files whose size exceeds 500KB have been compressed and converted from ES6 to ES5. If the file uses ES6 features, please use other tools to convert the file to ES5 or compress, otherwise it may run risks on devices of earlier versions: . static/js/vendorjs”
Technology stacks used:
- 1.mpvue [mpvue.com/]
- 2.webpack [www.webpackjs.com/]
Ii. Problem description
When using mpvue applets package to publish and upload, the following error occurs:
Third, problem analysis
1. Analysis of vendor. Js
According to the error message, open the project dist directory /static/js/vendor.js, you can find that this is a public package. If there is related code used in multiple pages or modules, the code will be identified as public code by Webpack, and the public code will be pulled out to here. We can sort of figure out what’s public.
2. Analyzing package dependencies (Webpack-Bundle-Analyzer)
Install dependencies
build
webpack.dev.conf.js
Stat
3. Analyze the packaging configuration
Go back to the webPack configuration section, find the common code extract section, and you can find the CommonChunkPlugin (since this project uses a relatively old previous version of MPVue, CommonsChunkPlugin is used to extract third-party libraries and public modules to avoid large bundles loaded on the first screen or on demand. As a result, the loading time is too long. What is extracted here is the third party public package.
Note: before using webpack.optimize.Com monsChunkPlugin webpack4, then use config. Optimization. SplitChunk for common code
Iv. Solutions
1. Transform webPack for unpacking
Through the analysis of the project, taking this project as an example, it can be found that the package modules occupying a large area in the analysis report are mainly concentrated in the part marked with red lines:
2. Unpack the package
Step one:
The contents shown in the figure above will be uniformly packaged into Vendor.js. Without changing the business logic, such as removing useless references, the packaged contents of Vendor.js need to be further split. The method is: build an extra CommonsChunkPlugin to split the contents in Vendor.js according to the matching list.
Chunks :[‘vendor’] specifies explicitly which modules to split
Name :’ Commons’ specifies the name of the new module generated after the split
Step 2:
The previous step solved the webPack configuration problem by generating an additional public package called commons.js, but there is another problem that needs to be solved by packaging the file’s reference to that file. Node_modules /mpvue-loader/lib/mp-compiler/templates.
Create the reference transformation file check-vendor.js
Overwrite the file before running the package command
Configuration Script entry
3. Other options
Through looking through other materials, there are other schemes, such as: small program subcontracting, but considering the problems of engineering business not changing as far as possible, compatibility between old and new versions and so on, the scheme of self-modifying Webpack packaging mechanism is adopted here, so as to minimize the impact on business logic code.
4. Import as required
Another solution is to analyze whether some packages in the business logic code can only import the required parts, such as I18, determine whether there are so many language packages according to the business, etc., such as the following method: Webpack optimization techniques, build efficiency increased by 50%
5. Optimization results
Through a series of optimization steps above, the final comparison is as follows:
Optimization before packaging:
After optimized packaging:
Final result: normal upload, error message disappear, real machine debugging can be carried out normally.
Six, summarized
1. Thinking of old engineering renovation
Through the above analysis and solution steps, considering whether the project is suitable for upgrading the new version of MPVue and how much impact it has on the existing business logic, we finally choose to carry out the reform of Webpack without moving the business logic. If the risk is not too great, it is suggested to consider the small program subcontracting scheme.
2. Lock packets for subsequent compatibility
The simplest DEMO has been uploaded to Github: mp-COMPRESS.