Vue project packaging, merging and compression to optimize web page response speed

Preface

There are many factors that affect the response speed of web pages, such as: the request content is too large, the number of http requests is too large, the server itself takes too long to process the request, the JS script takes too long to execute, the browser reflows and redraws, etc. The response speed of website pages is closely related to user experience and directly affects whether users are willing to continue visiting your website. For Vue projects, the most common problem may be that the bundled file is too large, resulting in a long loading time. The server request processing takes too long and the js script execution takes too long. These two are closely related to the quality of the code and the server configuration, and need to be optimized according to the specific project and code. Today we will only optimize the web page response speed from two levels: the number of requests and the large size of the single file after packaging (this applies to all front-end projects).

1. The request content is too large

After the project is packaged, we often find that the vendors and app files are too large. The app.js file contains the logic code of each page in the project, and vendor.js contains some common codes for each page and component. As the complexity of the project increases, the size of this file will also increase. When bandwidth is limited, it often takes a long time to download these two files.

Solution:

• Routing lazy loading: splitting code blocks

Vue supports asynchronous components, that is, you can use a Promise where the component is used, and the Promise will eventually return a component object through resolve. The dynamic import method of webpack allows the code to be packaged in chunks and returns a Promise (which is exactly what asynchronous components need). Using import in the routing configuration table can split each page component into different code blocks, and then load the corresponding component when the route is accessed. This avoids packaging all content in one chunk, thereby "loading on demand" and greatly improving response speed. Introduce the routing component as shown in the following figure:

CDN Introduction

Business codes are frequently updated and iterated. In order to allow the browser to cache our static files for as long as possible, if the class library code and the business code are packaged together, the class library code will be updated as the business code is updated, and cannot be cached in the browser for a long time. We hope to use cache to reduce browser traffic and increase the loading speed of user browsers, so we split it out and package it separately. Generally, third-party packages will have script import solutions. You only need to ignore the third-party package when packaging, and then add the corresponding import link to the template.

First, there is no vue.config.js that needs to be created in the project root directory

The specific code is as follows:

const cdn = {
    // Ignore packaged third-party libraries externals: {
      vue: 'Vue',
      "element-ui": "ELEMENT",
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios',
      moment: "moment",
      echarts: "echarts"
    },
  
    //Use js via cdn: [
      'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
      'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
      'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
      'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
      'https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js',
      'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js',
      "https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.2/index.js",
    ],
  
    css: ["https://unpkg.com/[email protected]/lib/theme-chalk/index.css"],
  }

module.exports = {
    publicPath: '/CRM/dist/',
    // publicPath: './',
    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].cdn = cdn
            return args
          })
          config.plugins.delete('prefetch')
    },
    //Packaging ignores third-party libraries configureWebpack: { 
        externals: cdn.externals
    },
}

Then add it to the corresponding position of the pulic/index.html template (add the position yourself)

//The following is css, if it is script, change the comment. It is easy to understand if you look carefully. The config configuration is to add a cdn variable, and then traverse and add it in the template <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="stylesheet">
    <!-- <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" crossorigin="anonymous"></script> --> 
  <% } %>

Another benefit of using CDN is that it can increase packaging speed.

Compress request resources

Generally, we deploy to the server and use nginx as a proxy server, and all requests are forwarded through nginx. We can enable gzip by configuring nginx.

server {
        gzip on;
        gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}

With the above configuration, every time the browser requests a resource from the server, the server will compress the resource before returning it to the browser, which will then decompress it. This can greatly improve the download speed of static resources.

But there is another point. In this case, every time the browser makes a request to the server, the server will perform a compression operation. When the request volume is large, the compression operation will also affect the server's response speed. Therefore, we can directly package the files into a compressed package when packaging. This way the server does not need to package frequently:

Installation dependency: compression-webpack-plugin

npm install compression-webpack-plugin --save-dev

vue.config.js modification:

const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
    publicPath: './',
    productionSourceMap: false,
    configureWebpack: {...},
    chainWebpack: config => {
        config.resolve.alias.set('@', resolve('src'));
        if (process.env.NODE_ENV === 'production') {
            config.plugin('compressionPlugin')
            .use(new CompressionPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: productionGzipExtensions,
                threshold: 10240,
                minRatio: 0.8,
                deleteOriginalAssets: true
            }));
        }
    },
};

nginx configuration

server {
        gzip_static on;
        gzip on;
        gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}

1. Too many http requests

Everything has a limit, which is what we call "extremes lead to their own opposites." We use on-demand loading, code segmentation and packaging. When the project becomes larger and larger and there are more and more modules, we will find that a lot of files will be generated after the project is packaged. For front-end performance, although each file is smaller, it may mean more overhead for establishing and closing network connections. Therefore, in the practice of front-end optimization, it is usually necessary to strike a balance between the number of files and the size of a single file. Here, we can use the MinChunkSizePlugin plugin provided by webpack to keep the chunk size above the specified size limit by merging chunks smaller than minChunkSize.

Solution:

vue.config.js configuration

module.exports = {
    publicPath: './',
    productionSourceMap: false,
    configureWebpack: {
        plugins: [
            new webpack.optimize.MinChunkSizePlugin({
              minChunkSize: 10000 // Minimum number of characters
            })
        ]
    },
}

Through the above operations, we can control the size and quantity of the packaged files within a reasonable range. By configuring ngnix and turning on gzip, we can basically solve the problem of long waiting time for the first load of most Vue single-page applications.

Summarize

This concludes this article about Vue project packaging, merging and compression to optimize web page response speed. For more relevant Vue project packaging, merging and compression content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!