Front-end (mobile embedded WebView) performance optimization

Project background

Multi – figure active page, using vuE-CLI scaffolding to build arrow project

At first, the page is slow to open (js, CSS, etc.)

The first step is the most effective. Try firstgzip

What specifically

Gzip uses the Lempel-Ziv encoding (LZ77) to reduce the size of named files. Whenever possible, each file will have the extension ‘.gz’ while maintaining the same ownership mode, access and modification time. (The default extension is “ž’ (for MSDOS, OS / 2 FAT, and Atari.) If no file is specified, or if the file name is –, the standard input is compressed to standard output. Gzip will only attempt to compress regular files. In particular, it ignores symbolic links.

How is Gzip configured

1. Configure the client

npm install --save -dev compression-webpack-plugi
Copy the code

//vue.config.js
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: config= > {
      config.plugins.push(new CompressionPlugin({
        filename: "[path].gz[query]".// Target resource name
        algorithm: "gzip".test: productionGzipExtensions, // Process all resources that match this {RegExp}
        threshold: 10240.// Only resources larger than this value are processed. In bytes (compressed above 10K)
        minRatio: 0.8 // Only resources with compression rates lower than this value will be processed}}}))Copy the code

2. Nginx proxy

//nginx.conf
 gzip on;
    gzip_buffers 4 16k;
    gzip_comp_level 5;// The compression level, the larger the number, the smaller the file, the higher the CPU consumptiongzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg  image/gif image/png;// The type of file to compress
Copy the code

My nginx file does not take into account the issue of small file compression, or support for older browsers

Ali cloud data, there is a significant decline

The second step is also effective – enable CDN to introduce NPM

npm install --save -dev html-webpack-externals-plugin
Copy the code

It is recommended to go to bootcDN to find compressed JS and other plug-ins

//vue.config.js
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin'); 
module.exports = {
 	config.plugins.push(
   new HtmlWebpackExternalsPlugin({
        externals: [{module: 'vue'./ / package name in json
          entry: 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js'./ / the CDN links
          global: 'Vue'// The name of the variable taken from import
          },
          {
            module: 'svgaplayerweb'.entry: 'https://cdn.jsdelivr.net/npm/[email protected]/build/svga.min.js'.global: 'SVGA'
          },
          {
            module: 'vconsole'.entry: 'https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js'.global: 'VConsole'
          },
          {
            module: 'vue-router'.entry: 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js'.global: 'VueRouter'}]}}))Copy the code

Step 3 Put pictures and other resources into CDN file storage (enterprise)

Instead of using locally saved static image resources to put resources on the CDN server

Did not ～～～～～～ I am big also, a front end small dish chicken, still in touch climb roll dozen grow.