preface

Front-end performance optimization before contact less, with the increase of projects, performance problems came out, before the thought of performance optimization is to reduce Http requests, but it’s not only can control myself, this involves business logic and the back-end change bad also, think of projects with bosses do before using the Gzip, just want to learn.

GZIP is to optimize performance through HTTP compression, which can greatly improve the speed of browsing websites. Its principle is that after the client requests the corresponding resources from the server, the resource file is compressed from the server, and then output to the client. The browser of the client is responsible for decompressing and browsing.

Vue project configuration

Vue-cli projects are configured with Gzip, which can be used by changing the configuration file and installing dependencies.

<! --config/index.js--> productionGzip:true.// Whether to enable Gzip compression
    productionGzipExtensions: ["js"."css"].Copy the code

Keep an eye on the notes

<! --build/webpack.prod.conf.js-->// If in.. If Gzip is enabled in /config/index.js, remember to install NPM install compression-webpack-plugin --save-dev
if (config.build.productionGzip) {
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
            filename: '[path].gz[query]'.// This property was an asset
            algorithm: 'gzip'.test: new RegExp(
                '\ \. (' + config.build.productionGzipExtensions.join('|') + '$'
            ),
            threshold: 10240.minRatio: 0.8}}))Copy the code

However, according to Baidu Baike, there may be errors in packaging. It may be because of the version that relies on compression-webpack-plugin. It is ok to uninstall this dependency and reinstall other versions. Ok, let’s do the NPM run build and we can see that there are more GZ files than before

Tomcat server

The next step is to configure the server, but I can’t ah… This big guy wrote more comprehensive, Tomcat can go to see.

Nginx server

If it’s for an Nginx service, go to the nginx configuration file and add the following code to the HTTP configuration, then restart the nginx service.

http:{ 

      gzip on; 

      gzip_static on;

      gzip_buffers 4 16k;

      gzip_comp_level 5; gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg  image/gif image/png; }Copy the code

Vue enabling GZIP performance optimization consists of two parts. Write it down so you don’t forget. Lol, nuggets are good stuff.