Original address: https://jingyan.baidu.com/album/454316ab29d0c0f7a7c03a1f.html?picindex=1
The vue project enables gzip compression and deploys nginx to enable gzip optimization performance.
The first step is to install dependencies in the vue project and change productionGzip to true to enable Gzip compression:
npm install --save-dev compression-webpack-plugin
The second step is to run npm run build to package the project. At this time, an error may be reported, prompting ValidationError: Compression Plugin Invalid Options. According to the official website prompts, the setting of CompressionWebpackPlugin needs to be changed from asset to filename.
The third step is to run npm run build to package the project again. At this time, an error may continue to be reported, prompting TypeError: Cannot read property 'emit' of undefined. According to my verification, there is a problem with the installed compression-webpack-plugin dependency. I need to uninstall the compression-webpack-plugin and change to install the lower version v1.12.
The fourth step is to uninstall the currently installed compression-webpack-plugin: npm uninstall --save-dev compression-webpack-plugin
The fifth step is to install a lower version of compression-webpack-plugin: npm install --save-dev [email protected]
The sixth step is to run npm run build again to package the project. At this time, the vue project will be packaged normally, and the vue development will be online happily (ku) quickly (bi).
The seventh step is to enable nginx server gzip performance optimization. Find the nginx configuration file, add the following code in the http configuration, and 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;
}
To sum up, Vue's gzip performance optimization is mainly divided into two parts. After successful opening, the Vue homepage loading time will be greatly optimized.
If you have anything you don’t understand, you can follow the [H5 front-end development community] WeChat official account and leave me a message! You can also get Taobao coupons!
