What are the Vue loading optimization strategies?

Vue loading optimization strategy: 1. Lazy loading of routes; 2. Loading components on demand; 3. Using CDN acceleration strategy; 4. Using [compression-webpack-plugin] to package files into gzip format.

[Related article recommendations: vue.js]

vue loading optimization strategy:

Method 1. Lazy loading of routes

The reason for the slow loading of the first screen is simply that the single-page application needs to load the entire page on the routing table, and routing Lazy loading is here to solve this problem. It would be more efficient if we could split the components corresponding to different routes into different code blocks, and then load the corresponding components when the route is accessed. The following is a specific example of lazy loading of Vue routing. The method is very simple. If you don't want to go into details, just introduce the route according to this format. If you are interested in routing lazy loading, please go to vue-router routing lazy loading

Method 2, component loading on demand

Why should we load components on demand? The reason is also very simple. Some component libraries contain rich components. If we introduce them directly, we will inevitably introduce some components that we don't use at all. This way the packaging will be relatively large, and it also looks very unprofessional on our part. Therefore, it is necessary to introduce it on demand. Let's now take the iview component library as an example to learn about the on-demand introduction process.

1. First introduce the on-demand loading tool babel-plugin-import

babel-plugin-import is babel. It will automatically convert the writing of import into on-demand import during the compilation process. .

npm install babel-plugin-import --save-dev

2. Create a .babelrc file in the project root directory and configure on-demand content loading

{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

3. Configure the components that the project needs to load in main.js

The following is An example of iview

# It should be noted here that globally registered components need to be hung on the vue prototype. For example, if we need to use the Notice component, then I need

Vue.prototype.$Notice = Notice;

In this way we can use iview components normally.

Method 3. Use CDN acceleration strategy

In the Vue project, all js and css files introduced into the project will be packaged into vendor.js during compilation. , then the vendor.js file size will be quite large, affecting the first opening experience. The solution is to separate the referenced external js and css files and not compile them into vendor.js. Instead, they are referenced in the form of resources. In this way, the browser can use multiple threads to asynchronously compile vendor.js, external js, etc. Load it down to achieve the purpose of accelerating the first opening. External library files can use CDN resources. There are some differences between vue cli3.x and vue cli2.x in configuring CDN. After vue cli is upgraded, the code structure has changed significantly, and the configuration file has been integrated into the vue.config.js file. The following uses amap, axios and qs as examples to describe how to use cdn to load resources.

1. Introduce relevant cdn resources into index.html

2. Configure externals

The vue cli3.x configuration webpack is in In configureWebpack of vue.config.js

After configuration, we can use the global Amap, axios and Qs normally

method 4. Use compression-webpack-plugin to package the file into gzip format

The dependency of compression-webpack-plugin will generate a .gz file when npm run build. The file accessed by the project later is this .gz file. The normal project packaging volume will be reduced by more than half. Isn’t it weird?

Let’s further talk about this dependency usage process.

1.npm introduces

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

2.vue cli3.x configures webpack in vue.config.js

3.nginx is enabled gzip mode

The front end has been configured in the previous step, and then nginx cooperates to enable gzip mode. This is relatively simple. As long as you have a little understanding of nginx, we configure some code in http in nginx.conf

4. Verify whether the configuration is successful

This step is very simple. You only need to check whether the Content-Encoding of the Response Headers of the chunk class file is gzip. Can

Related free learning recommendations: JavaScript (video)

The above is the detailed content of What are the Vue loading optimization strategies?. For more information, please follow other related articles on the PHP Chinese website!