[Vite+vue3.2 project performance optimization practice] Use vite-plugin-cdn-import to accelerate CDN and optimize project size

CDN (Content Delivery Network) is a content distribution network, which is a technology that accelerates the transmission of network content by deploying servers in a distributed manner around the world. The principle of CDN acceleration is that when a user requests to access a certain resource, the CDN will automatically select the server closest to the user to respond to the request according to the user's geographical location and network conditions . If the resource has been cached on the server, the CDN will directly return the cached resource to the user, thereby reducing network transmission time and bandwidth consumption.

vite-plugin-cdn-import is a Vite plugin, which can help us import CDN resources into the project, so as to improve the loading speed and performance of the project. Using this plug-in, we can import some commonly used third-party libraries (such as jQuery、Vue、Reactetc.) from local files to CDN, thereby reducing network requests and file sizes, and improving page loading speed.

This article will use the vite-plugin-cdn-import plug-in for CDN acceleration optimization projects.

vite-plugin-cdn-importPlugin official website: https://github.com/mmf-fe/vite-plugin-cdn-import

1. Analysis dependency view

Following the above, we use rollup-plugin-visualizer to analyze the dependency view:

Analyzing the above figure, we found that the entire project depends on 581KB, of which vue volume accounts for 42.75%, 248.75KB in size, followed by vue-router accounting for 17.56, and The volume of this package in vue runtime-core/dist/runtime-core.esm-bundler.jsis the largest, 181KB in size, occupying 31.12% of the overall consumption.

After analysis using Lighthouse, it was found that the loading time of the first screen reached an astonishing 7.7s, which was intolerable to users. Putting aside other reasons, let’s first use CDN acceleration to see how much it can be reduced.

2. CDN Acceleration

2.1, CDN management plug-in vite-plugin-cdn-import

First download the CDN management plug-in dependencies:npm install vite-plugin-cdn-import --save-dev

Configuration vite.config.ts, the steps are similar to configuring the plug-in before, first importrely on
import importToCDN from "vite-plugin-cdn-import"orimport { Plugin as importToCDN } from "vite-plugin-cdn-import"

Then configure the plugin into plugins;

Then configure modulesthe parameters, the meaning of the parameters is also very simple.
name: Indicates the name of the module var: Indicates the variable name of the module in the global scope. If this attribute is not specified, the name of the module will be used as the variable name by default. path: Indicates the path of the module in the CDN.

import {
    
     Plugin as importToCDN } from "vite-plugin-cdn-import"

export default defineConfig({
    
    
  plugins: [
    vue(),
    visualizer({
    
    
      open: true, //注意这里要设置为true，否则无效
      filename: "stats.html", //分析图生成的文件名
      gzipSize: true, // 收集 gzip 大小并将其显示
      brotliSize: true, // 收集 brotli 大小并将其显示
    }),
    importToCDN({
    
    
      modules: [
        {
    
    
          name: "***",
          var: "***",
          path: "********",
        },
      ],
    }),
  ],

2.2. Configure dependencies that need to be accelerated

There are many excellent CDN acceleration service sites at home and abroad. You can choose according to your needs. It should be noted that: Vite will not rewrite the content imported from external files. We need to use a CDN site that supports ESM compilation

First check the version number of the dependency you need to accelerate in package.json, such as vue is 3.2.45:

After entering bootcdn, find the corresponding CDN URL according to your own version number:

copy and paste it into the corresponding path, such as:

importToCDN({
    
    
      modules: [
        {
    
    
          name: "vue",
          var: "Vue",
          path: "https://unpkg.com/vue@3/dist/vue.global.js",
        },
      ],
    }),

Of course, if the picture is simple, vite-plugin-cdn-import also provides us with the function of automatically importing CDN (autoComplete). There are many commonly used dependencies that do not need to be found by ourselves (such as etc. vue、reac、antd、axios). The autoComplete function can be found in the documentation. .

2.3. Remember to introduce the module in main.ts

It is to import the corresponding module in main.ts and then mount it. Note that the name must be the same as the name of your CDN acceleration. Otherwise, it will not be imported. Generally, there is no need to modify it. Only after encountering problems, check whether you forgot to import or introduced errors. up.

Finally, don't forget to npm run build repackage!

3. Analyze the optimization effect

After repackaging, the view is as follows:

It can be seen that the original vue dependency package and vue-router dependency package have all disappeared, and the entire project dependency has been reduced to 72.53KB (the original is more than 500 KB). This is because we use CDN acceleration, and these two will no longer be packaged into the project separately in the future, which greatly reduces the size of the entire project.

Four, pay attention

Note the following points:

1. CDN resource version issues : When using CDN resources, you need to pay attention to resource version issues. This can cause some issues if you are using an unstable version. It is recommended to use a stable version of CDN resources.
2. Availability of CDN resources : When using CDN resources, you need to pay attention to the availability of resources. If the CDN resource used is not available, it may cause your application to not work properly. It is recommended to use a reliable CDN service provider, and build the CDN service by yourself if necessary. It is recommended to use: Tencent Cloud CDN Service
3. Environment configuration : The CDN acceleration method of the development environment and the deployment environment may be different.

Although CDN acceleration can improve website access speed and user experience, it also requires a certain amount of cost and energy for deployment and management. At the same time, security and cache management issues need to be paid attention to.