Front end performance optimization - using content distribution network CDN

Posted by Anyaer on Wed, 26 Jan 2022 06:58:02 +0100

Why use CDN

  • When more and more components are introduced, use the app packaged by webpack JS file is easy to become too large, which is very unfriendly to the first screen loading.

  • The JS code using the third-party resources of CDN will no longer be packaged into the JS package of local services. Reduce the volume of local JS package and improve the loading speed- Speed up Web page loading

  • When a Vue project is packaged, all code will be merged into new files by default, including various libraries, resulting in a large package. If cdn is used, it will be more conducive to the loading speed of the program.

  • In the Vue project, all js and css files introduced into the project will be packaged into the vendor js, the browser can start displaying the first screen only after loading the file. If many libraries are introduced, then the vendor js file volume will be quite large, affecting the first opening experience.

  • Separate the referenced external js and css files and do not compile them into vendor js, but in the form of resources, so that the browser can use multiple threads to asynchronously connect vendors js and external js are loaded to speed up the first opening

solve the problem

  • The packaging time is too long, the code volume after packaging is too large, and the request is slow
  • The server network is unstable and the bandwidth is not high. Using cdn can avoid the problem of server bandwidth

shortcoming

  • There are more requests. The first time there is no cache, some packages will download very slowly
  • In case the CDN resource path changes or crashes, and the project will crash if it is not cached, it is recommended to build a CDN library by yourself.

Title what needs CDN

  • Run npm run build --report under the root directory of the project
  • After the package is completed, a page will be opened to show the size of each dependent package, check which third-party dependent packages are large, kill them and get them from CDN.

Get CDN address

https://www.jsdelivr.com/
https://www.bootcdn.cn/

  • Confirm the resources to be loaded with CDN in package lock JSON file, find the corresponding version number.
  • Find the corresponding resource path on the BootCDN website. Cannot find the CDN resource path for echorts GL

How to import CDN

  • In package Delete the components to be introduced through CDN in JSON, mainly delete node in dependencies and devDependencies_ Reinstall after modules
  • vue.config.js configuration
// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
	  'axios': 'axios',
	  'vue-router': 'VueRouter',
	  'vuex': 'Vuex',
	  'moment': 'moment',
	  '@antv/g2': 'G2',
	  '@antv/data-set': 'DataSet',
	  'ant-design-vue': 'antd',
	  'AMap': 'AMap',
	  "element-ui": "ELEMENT", //Some people say you need to configure uppercase
    }
  },
  chainWebpack: config => {
    const cdn = {
      css: [
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vant/index.css',
        '//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/element-ui/element-ui-index.css'
      ],
      js: [
	    'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
	    'https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js',
	    'https://cdn.jsdelivr.net/npm/vue-router@3.1.2/dist/vue-router.min.js',
	    'https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
	    'https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js',
	    'https://cdn.jsdelivr.net/npm/moment@2.24.0/locale/zh-cn.js',
	    'https://cdn.jsdelivr.net/npm/@antv/g2@3.5.7/dist/g2.min.js',
	    'https://cdn.jsdelivr.net/npm/@antv/data-set@0.10.2/dist/data-set.min.js',
	    'https://cdn.jsdelivr.net/npm/ant-design-vue@1.3.16/dist/antd-with-locales.min.js'
	  ]
    }
    // If using multi page packaging, use vue inspect --plugins to check whether the html is in the result array
    config.plugin('html').tap(args => {
      // Add cdn to html
      args[0].cdn = cdn
      return args
    })
  }
}

Functions of external configuration options:

We want to reference a library, but we don't want webpack to be packaged, and it doesn't affect our use of CMD, AMD or window/global in the program. We can configure externals.

Note for tread pit configuration: ELEMENT UI should be capitalized as ELEMENT

  • public/index.html
    Add the following code to the label:
<!-- use CDN of CSS file -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>

<!-- use CDN of JS file -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>

Equivalent to introducing labels directly

<html>
  <head>
    <link href="https://cdn.bootcss.com/element-ui/2.4.4/theme-chalk/index.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/three.js/100/three.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.4.4/index.js"></script>
    <script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.min.js"></script>
  </body>
</html>
  • Comment out main Introduction in JS
  • main.js may have css files that introduce related components. When the CDN of css files is used, it is not necessary to use main JS.

If the original import is not deleted, the project will still be imported from node_ Introduce resources into modules.
In other words, if it is not deleted, npm run build will still package the referenced resources together, and the generated files will be much larger. So I think it's better to delete it

// main.js
import Vant from 'vant';
// import 'vant/lib/index.css'; //  When the CDN of the CSS file is used, it is not necessary to use the main JS
Vue.use(Vant);

// import 'element-ui/lib/theme-chalk/index.css'
// import Element from 'element-ui'
// Vue.use(Element, { size: 'small' })

Package and report error after reference

  • After the reference is completed, the package reports an error. Vue is not defined, but it starts and runs normally.
  • Because global variables are actually defined, but eslint does not recognize global variables, you need to eslintrc.js configuration file
  • Declare that these are global variables and package them again.
globals: {
    'Vue': true,
    'VueRouter': true,
    'Vuex': true,
    'THREE': true,
    'echarts': true,
    'axios': true,
    '_babelPolyfill': true
}

Use pre acquisition (to be verified)

  • Just add rel = "prefetch", rel = "DNS prefetch", or rel = "preload" tag on the link attribute.
  • preload: the code will be loaded preferentially and occupy the number of http concurrency, which will also lead to a longer page loading time, especially the first screen time
  • prefetch: the code of is scheduled to be loaded later, so as to achieve the optimization effect.
<script rel="preload" src="https://cdn.bootcss.com/three.js/100/three.min.js"></script>
<script rel="prefetch" src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
  • It is thought that three modified by preload will be loaded preferentially, while echarts modified by prefetch will be loaded later.
  • Neither the local nor the server configuration has changed at all. It is loaded in strict order

Vue cli 4 uses report to analyze vendors js

Vue Cli (@ / vue/cli) has its own webpack package volume optimization tool, which can view the size of each module for optimization. Just add the -- report parameter after build.

1. We configure the command to package JSON

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "report": "vue-cli-service build --report"  //Join this line
},

2. Execute npm run report package and generate report.
Note: many people on the Internet say that you need to install the webpack bundle analyzer package first, but you don't need to install it.

3. After running npm run report, a report will be generated in dist directory while build ing HTML. After opening, you can see the occupied size of each file

Topics: Front-end network Vue Interview Optimize

Hot Topics

©2024 Programmer Think