Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

Introduction to the

Some of the ways in which performance is optimized when webPack is packaged make up this series of articles

series

Optimization of WebPack packaging performance (1) Gzip and externals

Version update

With older versions of Webpack and Node.js, there are many optimizations for packaging speed and performance that make it easier to upgrade when possible

Use gzip to compress the packed JS file

This method optimizes the file size at browser download time (packaged file size does not change)

Webpack. Config. Prod. Js

var CompressionWebpackPlugin = require('compression-webpack-plugin');
// Add it in plugins
new CompressionWebpackPlugin({ / / gzip compression
    asset: '[path].gz[query]'.algorithm: 'gzip'.test: new RegExp(
        '\.(js|css)$'  // Compress js and CSS
    ),
    threshold: 10240.minRatio: 0.8
})
Copy the code

Gz js.gz, compressed JS and CSS.

Then enable gzip in the server-side nginx configuration:

Check the configuration file: vim/usr/local/etc/nginx/nginx. Conf

// Write in HTTP to gzip on; gzip_types application/javascript text/css image/jpeg;Copy the code

In this way, the browser still downloads the original js file, but the server returns the compressed.gz file, and then decompresses it locally, shortening the time considerably.

Echart uses external linked JS files and does not introduce NPM packages

Introduce echarts.min.js, china.js, echarts-gl.min.js, echarts-wordCloud.min.js in HTML, not NPM package

Added the following to the WebPack production packaging configuration:

Externals: {"react": "react", // The left side of the externals is a custom name. The right side of the externals is the global variable name "react-dom": "ReactDOM", "jquery": "echarts": "echarts" }Copy the code

Doc.webpack-china.org/configurati… After packaging, the file size is reduced by 0.5M