Webpack package optimization and turn on gzip

Source: Internet
Author: User
Tags gz file

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.