vue optimizes first screen loading time optimization-cdn introduces third-party packages

Foreword

  • Why should we optimize the first screen loading? Because as our static resources and third-party packages and codes increase, the package will become larger and larger after compression.

  • With the influence of the network, when we first enter the URL to request resources, the network is blocked, the loading time is long, and the user experience is not good.

  • After careful observation, you will find that the code is not very big after compression. The big ones are the project itself, static resources, and third-party packages.

  • In addition to the code level, we can use static image network requests, gzip compression, CDN (third-party package introduction method), and browser caching.

What is cdn introducing third-party packages-why is it done like this

  • When we develop locally and need to use other people’s packages. Download the package through npm.

  • And in the package.json file, we will classify which packages are used locally and which packages need to be used in production (will be entered during packaging)

  • Although these packages may not be that big, they still occupy memory resources and need to be loaded when loading for the first time (affected by the network)

  • CDN means that these third-party packages correspond to compressed files and are stored in the server. We only need to request them through the network (access server resources)

  • After using cdn, we can configure not to include these package dependencies in the resources when packaging, thus reducing the packaging size, compressing on the server, and transmitting faster. The cdn resource package can be accessed synchronously and transmitted in the form of gzip or br, which can reduce the load on the server faster. pressure

  • But after we use gzip + cdn, the general first screen loading time will be reduced by about 80% (assuming it is not affected by the network)

Where to get the cdn-third-party package address

  • Some mature frameworks will provide their own CDN addresses, such as vue-element-ui.

  • However, there are also websites that put mainstream third-party packages on the market on the server for us to access.

  • bootcdn – mainstream recommendations use this: BootCDN – Bootstrap Chinese website open source project free CDN acceleration service

  • jsdelivr can also be used: jsDelivr – A free, fast, and reliable CDN for JS and open source

Code implementation

1. Before we start, let’s take a look at how long it takes for the element.js package to load when there are fluctuations – 3.37 seconds

2. How do we determine which packages need to be imported via CDN?

  • First of all, element-ui-, vue and related family buckets must be introduced through cdn.

  • Secondly, we use package analysis and packaging resources to see which packages used in production need to be introduced by CDN.

legend

Check the resource file package size ratio after packaging – no need to download plug-ins – comes with it

2.1 We configure a command in the package.json file/scripts

"build:report": "vue-cli-service build --report",

2.2 Use command packaging – there will be a report.html file in the packaging file – open it directly in the browser and you can see the proportion of the production resource package

//Run the packaging command
npm run build:report

3. You need to configure the production environment identification in vue.config.js, you need to import packages from CDN, and configure to refuse to import the packages introduced by CDN into resources.

  • This version takes vue family bucket plus echarts as an example

  • You can directly copy mine and change the version in your project. You can also directly use mine and it has been tested without any problem.

  • Note that the left value in the cdn variable is the package name in package.json, and the right value is the name when using the package.

  • Router- and element are special Pay attention to the remarks

//Production environment identification
const IS_PRODUCTION = process.env.NODE_ENV === 'production'
?
//Configure the referenced js and css addresses
const cdn = {
  css: ['https://unpkg.com/[email protected]/lib/theme-chalk/index.css'],
  js: [
    'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
    'https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.9/vue-router.min.js',
    'https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js',
    'https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js',
    'https://unpkg.com/[email protected]/lib/index.js',
    'https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js',
  ]
}
?
// Use cdn nodes when configuring packaging and ignore third-party component packages
// The value on the left is the package name in package.json
//The value on the right is the name when using the package
const externals = {
  vue: 'Vue',
  vuex: 'Vuex',
  axios: 'axios',
  echarts: 'echarts',
  // The value on the right is router when used in router.js (writing this name directly will report undefined)
  // Should write 'VueRouter'
  'vue-router': 'VueRouter',
  //The value on the right is named Element in main.js (writing directly will result in an error)
  // Should be written as ELEMENT - this value is a global variable - has nothing to do with the reference name in main.js
  'element-ui': 'ELEMENT'
}
?
?
chainWebpack (config) {
    //Easy to view - other default configuration is omitted
    // When the configuration is a production environment, do not include the above package and import it through CDN.
    if (IS_PRODUCTION) {
      config.plugin('html').tap(args => {
        args[0].cdn = cdn
        return args
      })
      //Treat it as an external library without packaging it in
      config.externals(externals)
    }
  }

4. Go to -index.html of the public static file and introduce these resources – you can copy them directly

// css resources
<% for (var i in
    htmlWebpackPlugin.options.cdn & amp; & htmlWebpackPlugin.options.cdn.css) { %>
    <link
      href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
      rel="preload"
      as="style"
    />
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %>
    
// js resources
 <% for (var i in
    htmlWebpackPlugin.options.cdn & amp; & htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

legend

5. After the configuration is completed, we package it directly and throw it to nginx to start.

5.1 When our configuration fails, it will not load and the console will report an error – you should be happy if the following error occurs. These errors can be solved, there is only one step left.

5.2 If the configuration is successful – we will find that there is no error and the first screen will be loaded quickly. You will see it in the vue.config.js configuration address during the f12 check. When viewing js-css resources, it is very fast

5.3 After using cdn package to load – js static resource loading time – comparison of compression transmission methods

Summary:

After this process, I believe you have also had an initial deep impression on vue optimization first screen loading time optimization-cdn introduction of third-party packages, but in actual development the situations we encounter are definitely different, so we need to understand Its principle remains unchanged. Come on, hit the workers!

Please point out any shortcomings, thank you – Feng Guo Wuhen