Reasons for performance optimization:

  • Slow rendering
  • Long request time

Basic Optimization (General Version)

1. Put the style sheet in the HEAD – use the link tag to place the style sheet in the HEAD of the document

// Follow the HTML specification and put the style sheet in the header to avoid the white screen and the flicker of unstyled content. <head> <link rel="stylesheet" href="example.css"> </head>Copy the code

2. Place the script at the bottom

// The effect of putting the script at the top: the script blocks the display of the following content; Scripts block downloads of components that follow them; // Placing the script before the </body> tag at the bottom does not block rendering of the page content, and visual components in the page can be downloaded as soon as possible. <body> <! <script SRC ="example.js"></script> </body>Copy the code

3. Use iconfont

Ali Vector icon library. It’s just inserting characters and CSS styles into HTML, and it’s not in the same order of magnitude of resource usage as an image request. If you have small ICONS in your project, use vector images.

Vue project optimization

PC optimization (introducing elementUI framework)

Background: After the project is developed and packaged with Webpack, app.js is too large after compilation, resulting in slow initial page loading.

The elementUI framework is introduced. Since the package itself is several hundred kilobytes, the changes to the UI framework are loaded on demand.

Solution 1(lazy loading of routes) : Divide the components corresponding to different routes into different code blocks, and then load the corresponding components when the routes are accessed. Use vUE’s asynchronous components and Webpack’s code splitting function to realize lazy loading of routing components.

  • First, you can define an asynchronous component as a factory function that returns a Promise (the Promise that this function returns should resolve the component itself)
Const Foo = () => promise.resolve ({/* component definition object */})Copy the code
  • In Webpack 2, we can define code split points using dynamic import syntax
Import ('./ foo.vue ') // returns PromiseCopy the code

Synthesis:

const Foo = () => import('./Foo.vue')
Copy the code

Solution 2(component lazy loading) :

// const method <template> <One></One> </template> <script> const One = ()=>import("./ One "); export default { components:{ "One-com":One }, } </script> // asynchronous method <template> <One></One> </template> <script> export default {components:{ "One":resolve=>(['./one'],resolve) }, } </script>Copy the code

Solution 3: Use the Webpack-bundle-Analyzer to analyze project dependencies

// Build --> webpack.prod.conf.js // add the following configuration const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; . plugins: [ ... new BundleAnalyzerPlugin(), ... ]Copy the code

After adding the above code, execute the package command NPM run build, which will automatically pop up 127.0.0.1:8888. Find out which files in your project are taking up the most memory and optimize for them. Dependency optimization (using CDN)

Example:

  • CDN acceleration is selected for some steel with relatively large volume (take ECharts for example).
/ / index. The HTML < script SRC = "https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" > < / script >Copy the code
  • Configure Webpack to separate echarts
/ / file path build - > webpack. Base. Conf. Js module. Exports = {externals: {/ / externals libraries will not be webpack echarts packaging: 'echarts', }, }Copy the code
  • Import dependencies where they are needed.

Use CDN content distribution

  • Configure the vue. Config. Js
const CompressionWebpackPlugin = require('compression-webpack-plugin') const ENV = process.env.NODE_ENV || 'development'  module.exports = { configureWebpack: config => { if (ENV === 'production') { config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', test: /\.(js|css|html)$/, threshold: 10240, minRatio: // Import vue from 'vue', import vue from 'vue' Externals = {'Vue' : 'Vue', 'vue-router': 'VueRouter', 'axios': 'axios'}}}}. Externals = {'Vue' : 'Vue', 'VueRouter' : 'axios'}}}}Copy the code
  • Configure index.html and use EJS syntax in the body to determine if the environment is production
<body> <div id="app"></div> <% if (NODE_ENV === 'production') { %> <script SRC = "https://cdn.bootcss.com/vue/2.6.10/vue.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/axios/0.18.0/axios.min.js" > < / script > < %} % > < / body >Copy the code

Mobile performance optimization

Prerender mode

In the field of front-end rendering, there are mainly the following ways to choose:

  • CSR:
    • Advantages: Independent of data the fastest FP time client user experience good memory data sharing
    • Cons: SEO unfriendly FCP, FMP slow
  • Pre-rendered:
    • Advantages: No data dependence FCP time faster than CSR Good client user experience Memory data sharing
    • Cons: SEO unfriendly FMP slow
  • SSR
    • Pros: SEO friendly first screen performance, FMP faster than CSR and pre-rendering
    • Disadvantages: High data sharing cost on the client high maintenance cost on the template
  • homogeneous
    • Advantages: SEO friendly, high first screen performance, faster FMP than CSR and pre-rendering client, better user experience memory data sharing client and server code common, high development efficiency
    • Disadvantages: Node is prone to performance bottlenecks

In user-Centric Performance Metrics, there are four key Metrics for page rendering:

  • FP: First Paint (only one div root node.)
  • FCP:First Contentful Paint(Contains the basic framework of the page, but no data content.)
  • FMP:First Meaningful Paint(contains all elements and data of the page.)
  • TTI:Time To Interactive