Based optimization

1. Put the stylesheet link in the header

<head>
 <link rel="stylesheet"  href="example.css">
</head>
Copy the code

2. Put the JS script at the bottom

<body> ********** <! <script SRC ="example.js"></script> </body>Copy the code

Route lazy loading

Const routes = [{name: 'index, path:'/', component: () = > import ('.. / view/example vue '), / / dynamic import},]Copy the code

Component lazy loading

export default { data(){ return{} }, components:{ "helloworld":import('.. /components/helloworld.vue') } }Copy the code

Import third-party packages using CDN

The < body > < script SRC = "https://cdn.bootcss.com/vue/2.5.2/vue.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" > < / script > < / body >Copy the code

Configure in WebPack

/** * externals:{vue:' vue 'jquery:' jquery'}Copy the code

Lazy loading of images

npm install vue-lazyload -D
Copy the code

The main js file

import VueLazyLoad from 'vue-lazyload';
Vue.use(VueLazyLoad);
Copy the code
<template> <div> <img v-lazy=".. /assets/image/one.png" /> </div> </template>Copy the code

According to the need to introduce

When using some third-party libraries, load on demand to avoid introducing unused parts.

preload

Preload a resource using link’s preload attribute.

<link href="style.css" rel="preload" as="style" >
Copy the code

Async tag

Async tells the browser to do something else while loading the JS. Multiple script tags can be loaded in parallel without making the JS wait for each other. The JS is executed immediately after loading.

<script src="main.js" async></script>
Copy the code

Defer tag

Similar to async markup, javascript code is loaded asynchronously in parallel, but unlike Async, it will not be executed immediately after loading. Instead, it will wait for the browser to parse the HTML and generate the Render tree, and it will be executed in js order. So if there are dependencies between js modules, try to use defer.