Vue project first screen loading speed optimization

1. Routes are loaded lazily

1,

Improves user experience, improves the loading speed of first-screen components, and solves the white screen problem

2. Code examples

2.1 No Lazy route loading Is used

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)
export default new Router({
  routes: [
    {
    	path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
Copy the code

2.2 Lazy Route Loading

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', // Method 1: Vue asynchronous implementation // Component: Resolve => (require(['@/components/HelloWorld'], resolve)) () => import('@/components/HelloWorld') } ] })Copy the code

Two, group price lazy loading

1. Code examples

1.1 Original writing method

<template>
  <div class="hello">
    <hello-world></hello-world>
    111
  </div>
</template>

<script>
  import HelloWorld from './HelloWorld'
  export default {
    components: {
      HelloWorld
    },
    data() {
      return {
        msg: 'this is Vue App'
      }
    }
  }
</script>
Copy the code

1.2 Lazy Component Loading

<template> <div class="hello"> <hello-world></hello-world> 111 </div> </template> <script> export default { components: {/ / methods' HelloWorld: () = > import ('. / HelloWorld), / / method / / HelloWorld ': resolve => (['./HelloWorld'], resolve) } } </script>Copy the code

Three, through the introduction of online CDN link

1. Find the index.html file in your project

<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js'></script>
Copy the code

Configure webpack.base.conf.js

Add the following code to module.exports

externals: {
  // key: the name followed by the import package syntax from
  // Value: represents the variable name in the global environment when script is introduced into js files
  vue: 'Vue'.axios: 'axios'.'vue-router': 'Router'
}
Copy the code

Four, GZIP violence compression

1. Enable gzip mode on nginx

server { listen 8103; server_name ***; Gzip on; Gzip_types text/plain application/javascript application/x-javascript text/ CSS application/ XML text/javascript application/x-httpd-php image/jpeg image/png image/gif; Add Vary on to the HTTP header: accept-encofing, gzip_vary on; }Copy the code

2. Start gZIP on Vue

2.1 Installation Dependencies

NPM install [email protected] – save – dev

2.2 configuration gzip

config –> index.js

build: {
  productionGzip: true.productionGzipExtensions: ['js'.'css']}Copy the code

5. Expand: Analyze the reasons for large files

Analyze project dependencies using the Webpack-Bundle-Analyzer analyzer

build –> webpack.prod.conf.js

const BunldeAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

plugin: [
	new BunldeAnalyzerPlugin(),
]
Copy the code

When you run the NPM run build command, the following page appears in your browser, and you can see which files contain what