This is the 10th day of my participation in the August Text Challenge.More challenges in August

Reasons and solutions for the slow loading of vue pages for the first time, and the use of compression-webpack-plugin for packaging code compression Gzip

The first time a packaged VUE project was deployed to the server, I found that the first load was extremely slow, taking tens of seconds to load, not as smooth as it would be in a local development environment. The main reason is that the page is not configured after packaging, so the resource file is very large, and it takes a lot of time to load it all at one time.

One, plug-in package. Gz file

1. Install

2. Configure the plug-in in vue.config.js

Pack 3.

Nginx configuration

3. Tomcat configuration

Comparison picture of effect before and after optimization:

As you can see from the image, the loading time of the first screen has been greatly improved, from 5.55s to 578ms. This optimization is two-fold. The front end packages files as.gz files, and nginx configures the browser to parse the.gz files directly.

One, plug-in package. Gz file

1. Installation:

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

or

yarn add compression-webpack-plugin --save-dev
Copy the code

2. Configure the plugin in vue.config.js:

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js'.'css']
const isProduction = process.env.NODE_ENV === 'production'

  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        The '@': resolve('src')}},plugins: [
    // Ignore all locale files of moment.js
    new webpack.IgnorePlugin(/^\.\/locale$/./moment$/),

    // configure compression-webpack-plugin compression
    new CompressionWebpackPlugin({
      algorithm: 'gzip'.test: new RegExp('\ \. (' + productionGzipExtensions.join('|') + '$'),
      threshold: 10240.minRatio: 0.8
    }),
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 5.minChunkSize: 100})]},Copy the code

Pack 3.

Package file size information:

Nginx configuration

server{
    gzip on;
    gzip_buffers 32 4K;
    gzip_comp_level 6;
    gzip_min_length 100;
    gzip_types application/javascript text/css text/xml;
    gzip_disable "MSIE [1-6]\."; # Configure to disable gzip condition, support regex. This indicates that Gzip is not enabled in Internet Explorer 6 and below (because earlier versions of Internet Explorer do not support gzip_vary on). }Copy the code

3. Tomcat configuration

If you are using tomcat instead of Nginx, you need to go to the Tomcat config file to modify:

<Connector port="8080"
  protocol="HTTP / 1.1"
  connectionTimeout="20000"
  redirectPort="8443"
  compression="on"
  compressionMinSize="2048"
  useSendfile="false"
  noCompressionUserAgents="gozilla, traviata"
  compressableMimeType="text/html,text/xml,text/javascript,
application/javascript,text/css,text/plain,text/json"/>
Copy the code

Compression =”on” to enable compression. Optional values: “on” enable, “off” disable, “force” enable in any case.