vue cli3 project optimization

vue-cli3 Prefetch (official website content)

<link rel="prefetch"> It is a resource hint, used to tell the browser after the page loads, use of free time in the future to obtain the contents of a user might visit in advance.

By default, a Vue CLI application will be generated for all async chunk as a JavaScript file ( dynamic import()demand code splitting generated automatically prompts prefetch product).

These tips will be @ vue / preload-webpack-plugin injection, and by chainWebpack the config.plugin('prefetch') modification and deletion.

Example:

// vue.config.js 
module.exports = { 
  chainWebpack: config => {
     // remove prefetch plug 
    config.plugins. Delete ( 'prefetch' ) 

    // or 
    // modify its options: 
    config.plugin ( 'prefetch ') .tap (Options => { 
      Options [ 0] = .fileBlacklist Options [0] || .fileBlacklist [] 
      Options [ 0] .fileBlacklist.push (/ myasyncRoute (.) +? \. $ JS / )
       return Options 
    }) 
  } 
}

When the prefetch plugin is disabled, you can select a block of code to be obtained in advance by manual webpack of inline comments:

import(/* webpackPrefetch: true */ './someAsyncComponent.vue')

It will inject prefetch links after being loaded at runtime webpack parent block.

prompt

Prefetch link will consume bandwidth. If your application is large and there are a lot of async chunk, and users are mainly using more sensitive to the bandwidth of the mobile terminal, then you may need to turn off prefetch link and manually select the block of code to be obtained in advance.

Basic optimization

Routing lazy loading router.js

const HomePage = () => import(/* webpackChunkName: "HomePage", webpackPrefetch: true */ 'views/homepage/index.vue')
routes: [
    {
      path: '*',
      name: 'HomePage',
      component: HomePage,     
    },

CDN acceleration

<!DOCTYPE html>
<html lang="en" style=" height: 100%;">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0">
    <title>理财商城</title>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="./reset.css ">
    <link rel="stylesheet" href="./font/font.css ">
    
    <script type="text/javascript" src="./dprFlex.js"></script>
  </head>
  <body style="position: relative; width: 100%; height: 100%; overflow: hidden;background:#F1F1F2">
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script>
    
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    
    <script>

      // eruda.init();
      // var vConsole = new VConsole();
    </script>
  </body>
</html>

vue.config.js

configureWebpack: { 
    externals: {
       'shock': 'Sight' ,
       'VGx': 'VGx' ,
       'shock-router': 'VueRouter' ,     
       'Axios': 'axios' ,
       'moment': 'moment' 
    } 
  },

min.js

import Vue from 'vue'
import App from './App.vue'

import router from './router/index'
import Vuex from 'vuex'
import moment from 'moment'