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

foreword

• Why do we need to optimize the loading of the first screen, because as our static resources and third-party packages and codes increase, the package will become larger and larger after compression

• With the impact of the network, when we first input 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, and the big ones are the project itself, static resources, and third-party packages.

• In addition to the code level, we can request through the static image network, gzip compression, CDN (third-party package import method), browser cache

What is cdn importing third-party packages - why do it

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

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

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

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

• After using cdn, we can configure not to put these package dependencies into resources when packaging, so as to reduce the package size, compress on the server, and transmit faster. Synchronous access to cdn resource packages is transmitted in the form of gzip or br, which reduces server load faster pressure

• But after we use gzip+cdn, the general loading time of the first screen will be reduced by about 80% (under the premise of not being 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.

• But there are also websites that put the mainstream third-party packages on the market on the server for our access

• bootcdn-Mainstream recommended to use this: BootCDN - Bootstrap Chinese Network Open Source Project Free CDN Acceleration Service

• jsdelivr is also available: jsDelivr - A free, fast, and reliable CDN for JS and open source

Code

1. Before we start, let's take a look at how long it takes for the element.js package to load in case of fluctuations - 3.37 seconds

2. How do we judge which packages need to be imported by CDN

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

• Secondly, we use package analysis and packaging resources to see which packages for production use need to be imported by CDN

legend

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

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

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

2.2 Use the command to package - there will be a report.html file in the package file - you can see the proportion of the production resource package directly by opening it in the browser

// 运行打包命令
npm run build:report

3. You need to configure the production environment logo in vue.config.js, you need cdn to import packages, and the configuration refuses to include these cdn imported packages into resources

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

• You can copy mine directly, just change the version in your project, or you can use my test directly, no 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 special attention see notes

//生产环境标识
const IS_PRODUCTION = process.env.NODE_ENV === 'production'
​
// 配置引用的js，css地址
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',
  ]
}
​
// 配置打包时使用cdn节点，忽略第三方组件包
// 左边值是package.json里面包名
// 右边值是使用该包时候的名字
const externals = {
  vue: 'Vue',
  vuex: 'Vuex',
  axios: 'axios',
  echarts: 'echarts',
  // 右边值在router.js中使用时是router（直接写这个名字会报undefined）
  // 应该写 'VueRouter'
  'vue-router': 'VueRouter',
  // 右边值在main.js中使用名字是Element（直接写会报错）
  // 应该写ELEMENT-这个值是一个全局变量-跟main.js中引用名字并没有关系
  'element-ui': 'ELEMENT'
}
​
​
chainWebpack (config) {
    // 方便查看-其他默认配置省略
    // 配置是生产环境时，不包上面包打进去，通过cdn方式引入
    if (IS_PRODUCTION) {
      config.plugin('html').tap(args => {
        args[0].cdn = cdn
        return args
      })
      //视为一个外部库，而不将它打包进来
      config.externals(externals)
    }
  }

4. Come to the public static file - index.html - import these resources - can be copied directly

// css资源
<% for (var i in
    htmlWebpackPlugin.options.cdn&&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资源
 <% for (var i in
    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

legend

5. After the configuration is complete, we pack it directly - throw it to nginx to start

5.1 When our configuration fails, it will fail to load, and the console will report an error - you should be happy if the following error occurs, these errors can be resolved, just one step away

5.2 If the configuration is successful - we will find that there is no error and the first screen will be loaded soon, and you will see it in the vue.config.js configuration address when checking f12. It is very fast when viewing js-css resources

5.3 After using the cdn package to load - js static resource loading time - comparison of compressed transmission methods

---

Summarize:

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

Please point out any deficiencies, thank you -- Fengguowuhen