Vue.js学习笔记（八）H5性能优化——首屏加载速度提升

概要

H5的首屏加载速度提升，性能优化方法总结，注：项目使用vue-cli3进行创建。

组件按需引入

避免在 main.js 文件中全局导入组件，以Vant4为例。

1、安装以下两个插件，可以自动引入组件和样式。

npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

2、在 vue.config.js 文件中配置

const { defineConfig } = require('@vue/cli-service')
const { VantResolver } = require('@vant/auto-import-resolver');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
module.exports = defineConfig({
  configureWebpack: config => {
      //按需引入组件样式
      AutoImport.default({
        resolvers: [VantResolver()],
      }),
      Components.default({ resolvers: [VantResolver()] }),
    );
    };
  },
})

3、图片懒加载、提示等根据需要在 main.js 单独引入。

import 'vant/es/toast/style';
import { Lazyload } from 'vant';

路由懒加载

使用import在路由加载函数中实现组件或模块的动态导入，这样，只有当路由被访问时，对应的资源才会被加载。

import {createRouter, createWebHashHistory} from 'vue-router';

const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('@/view/home/myHome')
    },
]


const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

打包压缩

1.安装插件compression-webpack-plugin

npm i -D compression-webpack-plugin 

2、在 vue.config.js 文件中配置

const { defineConfig } = require('@vue/cli-service')
const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = defineConfig({
  configureWebpack: config => {
    config.plugins.push(
    // 压缩，需要前后端一起配置
      new CompressionWebpackPlugin({
        test: /\.(js|css|html|svg|woff|ttf|json)$/, // 匹配需要压缩的文件类型
        threshold: 10240, // 只有文件大小大于此值的文件才会被压缩（单位：字节）
      }),
    );
    //打包分割配置
    config.optimization = {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',//对同步异步加载资源都进行处理
      },
    };
  },

})