0. Lazy route loading

The route component does not use direct import, but anonymous function return form. The following comment can define the compiled JS file name. The contents of this JS file will not be requested before entering this route:

{
    path: '/home'.component: () = > import(/* webpackChunkName: 'base' */ '@/views/Index.vue')}Copy the code

1. Enable gzip compression

1.1. Server configuration is required to enable gzip, such as my nginx.conf configuration:

gzip on; gzip_min_length 80k; gzip_buffers 4 16k; gzip_comp_level 5; gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg  image/gif image/png;Copy the code

1.2.vue.config. js config gzip, NPM install related plug-ins:

const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
  configureWebpack: config= > {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]'.algorithm: 'gzip'.test: new RegExp('\ \. (' + productionGzipExtensions.join('|') + '$'),
          threshold: 10240.minRatio: 0.8})); }}},Copy the code

2. Use plug-in compression obfuscation to uncomment

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack: config= > {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new TerserPlugin({
          cache: true.parallel: true.sourceMap: false.terserOptions: {
            compress: {
              drop_console: true.drop_debugger: true}}})); }}},Copy the code

3. Remove unnecessary third-party libraries

3.1. Remove library NPM directive: NPM uninstall XXX

3.2. Put unnecessary libraries on the server side, such as moment.js, which is a common library for processing time. It is recommended to put it in the back end, or use alternative schemes such as day.js.

3.3. (Optional) Extract the third-party library. Instead of importing it in import mode, use its CDN link to directly introduce it in public in index.html in the traditional way, which is beneficial to reduce the volume of compiled package.

4. The CDN resource

Resource file CDN, like picture resources I are put in seven niuyun storage, never put the server, seven niuyun seems to configure the domain name can BE CDN accelerated, more convenient. If the client has special customization requirements, for example, the national address needs to be configured by itself and its configuration file is large, you must extract it instead of packing it in the client.

configureWebpack: config= > {
    if (isProduction) {
      config.plugins.push(
      .....
      / / separation packages
      config.externals = {
        'vue': 'Vue'.'vue-router': 'VueRouter'.'vuex': 'Vuex'.'axios': 'axios'}}},Copy the code

5. Image preloading

Prevent multiple images or large images from affecting client browsing experience:

export default class PreLoad {
    private i: number;
    private arr: string[];
    constructor(arr: string[]) {
        this.i = 0
        this.arr = arr
    }
    public imgs() {
        return new Promise(resolve= > {
            const work = (src: string) = > {
                if (this.i < this.arr.length) {
                    const img = new Image()
                    img.src = src;
                    if (img.complete) {
                        work(this.arr[this.i++])
                    } else {
                        img.onload = () = > {
                            work(this.arr[this.i++])
                            img.onload = null;
                        };
                    }
                    // console.log(((this.i + 1) / this.arr.length) * 100);
                } else {
                    resolve()
                }
            }
            work(this.arr[this.i])
        })
    }
}
Copy the code

Add a loop chrysanthemum or load an animation/prompt etc and then call this method to block the page:

const imgs = ['http://XX.png'.'http://XX.png']
const preload = new this.$utils.preload(imgs)
const preDone = await preload.imgs()
Copy the code

The topic outside

1. Three levels of common front-end optimization: network request, JS optimization and CSS optimization

  • Reducing HTTP requests
  • Lazy loading of images
  • Use font ICONS or SVG, avoid PNG, and use CSS image sprites for PNG
  • Avoid closures, reduce DOM redrawing, and avoid CSS expressions
  • No cookies, no IFrame, no Flash
  • Minimize references to large third-party libraries (reduce resource size)

2. In the new version of VUE-CLI tool, there is a good analysis tool integrated in the GUI interface, which can intuitively see the size of the compilation file of the project, and the targeted analysis and improvement of the code is also an important means of optimization.