vue 移动端首屏加速优化

1、减少打包体积

建议将静态图片存储到对象存储OSS或COS里然后使用CDN加速访问。

2、路由懒加载

使用动态导入组件，按需加载

{
    path: "/login",
    name: "login",
    component: () => import('@/pages/login/login/Login.vue'),
}

3、启用Gzip压缩

通过服务器或vite-plugin-compression生成.gz文件，减少传输体积

import viteCompression from 'vite-plugin-compression';

plugins: [
    viteCompression({
          verbose: true,
          disable: false,
          threshold: 10240,
          algorithm: 'gzip',
          ext: '.gz'
     })
]

4、图片资源压缩

使用vite-plugin-imagemin压缩图片

import viteImagemin from 'vite-plugin-imagemin';

plugins: [
    viteImagemin({
          gifsicle: {
            optimizationLevel: 7,
            interlaced: false
          },
          optipng: {
            optimizationLevel: 7
          },
          mozjpeg: {
            quality: 20
          },
          pngquant: {
            quality: [0.8, 0.9],
            speed: 4
          },
          svgo: {
            plugins: [
              {
                name: 'removeViewBox'
              },
              {
                name: 'removeEmptyAttrs',
                active: false
              }
            ]
          }
  })
]

5、手动分包策略

在vite.config.js中配置rollupOptions.output.manualChunks，将大依赖单独分包

manualChunks(id) {
  if (id.includes('node_modules')) {
    return id.split('node_modules/')[1].split('/')[0];
  }
}

6、图片懒加载

7、UI组件库按需引入

参考链接：chat.baidu.com/search?dyTa…

blog.csdn.net/weixin_4385…