Title: First screen Optimization Series (Part 2)

  • webpack
  • The image processing
  • Element – the UI categories: the front end

Requirement description: Optimize the loading speed of the first screen and reduce the white screen time. (Optimize the packaged file size)

The volume of Vendor.js can be reduced by introducing it through CDN

Why is Vendor.js so big when packaged? Vendor means the third party, that is, the third party. Webpack packs the referenced third-party libraries into a collection. There are many third-party libraries cited in this project, so the packaged vendor.js is naturally large.

"dependencies": {
    "axios": "^ 0.18.0." "."element-ui": "^ 2.2.1." "."js-cookie": "^ 2.2.0." "."qrcode": "^ 1.2.0"."vue": "^ 2.5.2." "."vue-router": "^ 3.0.1." "."vuex": "^ 3.0.1." "."vue-lazyload": ""
  }
Copy the code

Note that in ⚠️ vue-cli, you can run ‘NPM run build –report’ to generate a dependency map for the project, which helps analyze file sizes, component execution scripts.

According to the analysis, elemnt-UI is very large after the package of the referenced library, which can be introduced as needed according to the official document. As a result, the size of the file is reduced by 100KB after the package, but the difference is not significant compared with the whole Vendor.js. For example, these relatively mature libraries all have corresponding CDNS, such as CNDJS, CDN. bootcss, unpkg.com and so on. The speed of introduction through CDN is much faster than that of local Vendor.js. After comparing the loading speed of several CDNS, WE choose CDNJS. The loading speed is relatively fast.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.3/theme-chalk/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.3/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-lazyload/1.2.6/vue-lazyload.js"></script>
Copy the code

In a place like the introduction of these libraries can be removed was introduced, in the build/webpack base. Config. Add externals js:

externals: {
    'vue': 'Vue'.'axios': 'axios'.'vue-router': 'VueRouter'.'element': 'element-ui'.'vuex': 'Vuex'."vue-lazyload": "VueLazyload"
  }
Copy the code

Enable gzip compression to generate compressed files

  1. Installing a plug-in
npm install --save-dev compression-webpack-plugin
Copy the code
  1. Set productionGzip in config/index.js to true. After executing build, each JS and CSS file will be compressed with a gz suffix.
gzip on;
gzip_types text/plain application/javascriptapplication/x-javascripttext/css application/xml;
Copy the code

The image processing

Still image processing

For the home page of the display class, UI can not be expected to help us compress the banner, but several megabytes of pictures, in the case of insufficient server bandwidth, loading is very slow, test, a 1M picture, put on Ali Cloud OSS, no cache initial request needs 100ms, 200KB pictures through webpack, Then deploy to the server, request need 4s, the network environment is consistent, simply, put all the static pictures of the project to Ali cloud, and then build a constant file, management, have to say, so fast loading speed, packaging speed is also a lot faster.

const IMG_URL = {
    / / home page
    HOME: {
        BANNER1: 'https://oss-cn-beijing.aliyuncs.com/images/static-img/xx/xx.jpg'
    },
    COURSE_INDEX: {
        // Avatar background file
        AVTOR_BG: 'https://oss-cn-beijing.aliyuncs.com/images/static-img/xx/xx.png'}}Copy the code

Icon processing

At the beginning of my internship, I used CSS Sprite. Oh, my god, it was really troublesome. Every time I changed the icon, I had to synthesize it again, and then I had to recalculate the position. Iconfont is so good for team work very convenient also, every time the UI done figure uploaded, size, color, our own control, especially do half, theme you want to change color, more convenient, UI don’t have to back out of the figure, we only change a theme color values of the variables is ok (this way does not support multicolor icon, Multicolor icon, if you want to change the color, you can manually change the color value in SVG.

  1. Hand to hand, with your elegant use of icon
  2. Future will be hot: SVG Sprite technology introduction

The above is just my opinion, welcome to correct, common progress.