Scenario: The project is packaged using webpack2.x, and the static resources are configured via Nginx forwarding after packaging:
Problem: Webpack package of resource files special, particularly large, not packaged before the page a page JS has about 2M (which has been extracted from the CSS)?
Optimization One: A look at JS so big sure is not closed source-map, first will be webpack configuration file in Dev-tool:false,
Optimization Two: Use the Compresion-webpack-plugin plug-in to compress static resources and generate. gz files, configured as follows:
For specific usage, please refer to: http://www.css88.com/doc/webpack2/plugins/compression-webpack-plugin/
Optimization Three: How to use the compressed gzip file?
The Nginx configuration is turned on gzip compression, and Nginx will compress the specified type files according to the configuration conditions. Mainly for JS and CSS. If there is a file path with the same name as the original file (Add. gz), Nginx gets the gz file and, if it is not found, proactively gzip the compression.
The Nginx configuration is as follows:
At this point: The file has changed from 2M to 100+k, or too big to continue optimization ....
Welcome message exchange, La La La
Webpack package optimization and turn on gzip