1. Image compression

2. Lazy loading of images

3. Asynchronous components

The general way to write it is

<! --App.vue--> <template> <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  components: {
    HelloWorld
  }
}
</script>
Copy the code

This loading method, as soon as the App is imported, the HelloWorld component will be imported, used, and loaded during the initial loading. But what if the HelloWorld component is not needed at the beginning of the page rendering? It is likely that the user will not use this component during the entire browsing process. Like the popbox component.

So why should we spend precious resources loading components at the beginning of the application? We can improve this by applying lazy loading, which is the technique of loading something at a later stage, and code splitting.

Code splitting is the splitting of a piece of code into a separate file at compile time in order to reduce the application’s initial package and thus ease initial load.

By using dynamic import, WebPack will understand this syntax and automatically create a separate file for the module, which will be loaded when needed.

The principle is that webPack splits modules into separate files through dynamic import, reducing the size of the initial package.

Distinguish between static and dynamic imports

// static import module import utils from'./utils'// dynamic import import('./utils').then(utils => {// you can use utils module here})Copy the code

Lazy-loading components in VUE, the previous example could be written like this

<! --App.vue--> <template> <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
export default {
  components: {
    HelloWorld:()=>import('./components/HelloWorld.vue')
  }
}
</script>
Copy the code

Vue will lazily load the component once requested for rendering, and the component is split into a separate JS file for loading, see Network.

Now we load components as soon as they need to be rendered. If they need to be displayed by the user, we can add v-if to delay the component loading until they need to be displayed.

<! --App.vue--> <template> <div @click='show=true'></div>
  <div id="app">
    <div v-if='show'>
        <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>    
  </div>
</template>
<script>
export default {
  data() {return {
        show: false
    }
  }
  components: {
    HelloWorld:()=>import('./components/HelloWorld.vue')
  }
}
</script>
Copy the code

Now written this way, the component will only load if show is true.

The user experience

In most cases, asynchronous components are fast to load because they are small pieces of code that are broken out of the main package. But loading a large modal component in a weak mesh case may take some time to load and render. From the user’s point of view, we need to give some feedback to keep the user’s attention. We can use a loading component at load time. We could write it like this.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" @click='show=true'>
    <div v-if='show'>
      <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
  </div>
</template>
<script>
import AwesomeSpinner from './components/AwesomeSpinner'
export default {
  data() {return {
        show: false
    }
  }
  components: {
    // HelloWorld:()=>import('./components/HelloWorld'),
    HelloWorld:()=> ({
        component: import('./components/HelloWorld'Loading: AwesomeSpinner; loading: AwesomeSpinner; AwesomeSpinner, // Maximum loading time, if not successfully loaded within this time, error component display, default is infinite timeout: 5000})}} </script>Copy the code

conclusion

Asynchronous components are loaded and rendered asynchronously by import. Webpack automatically splits the components loaded asynchronously into separate JS modules, reducing the size of the initial package and reducing the loading time of the application. Vue also provides configuration items that provide good feedback to users when components load slowly.

4. Vue-router lazy loading (using Webpack code segmentation)

In a single page application, we use vue-Router to load different modules

//router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import mine from './pages/mine/index'
import main from './pages/main/index'
const routes = [
    { path: '/mine', name:'mine', component: mine },
    { path: '/', name:'main', component: main }
]

export default new VueRouter({
    routes
})
Copy the code

This import method loads all the pages the first time the page loads.

//router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// import mine from './pages/mine/index'
// import main from './pages/main/index'
// import login from './pages/login/index'
const routes = [
    { path: '/mine', name:'mine', component: ()=>import(/* webpackChunkName: "mine"* /'./pages/mine/index') },
    { path: '/', name:'main', component: ()=>import(/* webpackChunkName: "main"* /'./pages/main/index') },
    { path: '/login', name:'login', component: ()=>import(/* webpackChunkName: "login"* /'./pages/login/index')}]export default new VueRouter({
    routes
})
Copy the code

In this dynamic loading mode, Webpack will automatically carry out code segmentation and divide the page under each route into separate modules. When navigating to that page, the JS resources corresponding to this page will be loaded, which reduces the size of the initial resource file and improves the first loading speed of the website.

4. Webpack gzip compression

We all know that compressed files become much smaller, so if you compress files during build, the transmission time will be saved due to the smaller file size during network transmission.

Configure WebPack compression

// vue.config.js
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
    configureWebpack: {
        plugins: [new CompressionPlugin()]
    }
}
Copy the code

Download the compression will – webpack – the plugin

yarn add compression-webpack-plugin
Copy the code

The packaged file

yarn build
Copy the code

In the dist directory you can see that three files.js.gzip.map are generated, but on the console you can see that the compressed file is still much smaller.

The.map file is used to track errors. Some variable names of the packaged JS file have been replaced, and Spaces and newlines have been removed. If errors are reported during execution, it is difficult to track the location of the error code. If you do not want to generate a.map, you can configure it as follows:

//vue.config.js
module.exports = {
    productionSourceMap: false, configureWebpack: { ... }}Copy the code

Now that the.gzip file is packaged,nginx needs to configure it accordingly:

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log /var/log/nginx/host.access.log main;location / { root /lijianjian/hello-world/dist; index index.html index.htm; gzip_static on; }}Copy the code

After the configuration is complete, update the nginx configuration file

nginx -s reload
Copy the code

Now the browser can load gzip resources

The compression-webpack-plugin also allows for many other configurations, such as compression of the types of files, at which point the compression is required. See git for details

Of course, decompressing also takes time, but it’s worth it compared to the transfer time saved by compressing large files.

5. Use the UI library and load UI components on demand

6.preload