如何使用Vite缩小打包体积

分析文件依赖其实也可以使用浏览器自带的lighthouse进行网站检测

其实优化的主要难点还是从哪里开始去优化，如果不清楚自己的项目问题出现在哪里，就显得比较盲目，不知道优化哪里，那在优化之前我们先分析一下我文件依赖

• 安装插件 rollup-plugin-visualizer

plugins:[
     visualizer({ open: true }) 
]

• 运行打包命令，会自动弹出效果如下

通过该关系图得出依赖之间的关系，与文件大小，可以指定的去优化

指定文件按需加载

比如下面的echarts,这样就不会将整个包加载进来，因为vite自动开启tree-shaking，所以打包的时候只会将LabelLayout, UniversalTransition这两个依赖打进包里（包括组件库也是这种做法）

import { LabelLayout, UniversalTransition } from 'echarts/features';

下面开始运行我们本地打包的命令，查看依赖关系这样我们就可以相对于的优化

路径别名&文件尾缀

 resolve: {
      alias: {
        '@': pathResolve('src') + '/',
        '@views': pathResolve('./src/views') + '/',
      },
      extensions: ['.js', '.vue', '.json'], 
    },

静态资源的打包

 build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js',  
        entryFileNames: 'js/[name]-[hash].js',  
        assetFileNames: '[ext]/[name]-[hash].[ext]' 
      }
    }
  }

• 打包效果

最小化拆分包

将需要分离 的包 单独的打包出来

build: {

    rollupOptions: {
        output: {
            manualChunks(id: any): string {  
                if (id.includes("node_modules")) {
                    return id
                            .toString()
                            .split("node_modules/")[1]
                            .split("/")[0]
                            .toString();
                }
            }
        }
    }
}

关闭一些打包配置项

这个东西一般是在测试阶段调试使用的

build: { 
      terserOptions: {
        compress: {

          drop_console: true,
          drop_debugger: true,
        },
      },

      reportCompressedSize: false,

      sourcemap: false, 
}

低版本浏览器兼容

1. 安装插件npm i @vitejs/plugin-legacy -D

  legacyPlugin({
      targets: ['chrome 52', 'Android > 39', 'iOS >= 10.3', 'iOS >= 10.3'], 
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'] 
    })

使用CDN

其实使用cdn也有很多中方式，在这里就介绍我在项目中使用的，当然我这种也不是比较好方案，如果你有更好的方案，还请在下面留言

1. 安装插件 npm install rollup-plugin-external-globals -D
2. 配置插件比如我们需要吧Vue使用CND的方式引入

rollupOptions: {

        external: ['vue'],
        plugins: [

          externalGlobals({

            vue: 'Vue', 
          }),
        ] 
      },

3. 配置CDN地址 我们借助vite-plugin-html插件来帮我们自动引入地址

import { createHtmlPlugin } from 'vite-plugin-html';

createHtmlPlugin({
    minify: true,
    inject: {
        data: {
        title: ENV.VITE_APP_TITLE,  
        vuescript:'<script src=""></script>',
        },
     },
    }),

4. 最后在我们模板页面head部分上写入ejs模板语法

<% vuescript %>

5. 最后打包完在html文件中会自动将模板替换掉达到下面的效果

开启Gzip

它的主要作用就是缩小打包的体积

1. 安装插件 npm install vite-plugin-compression -D
2. 参数
   • filter：过滤器，对哪些类型的文件进行压缩，默认为/.(js|mjs|json|css|html)$/i
   • verbose: true：是否在控制台输出压缩结果，默认为 true
   • threshold ：启用压缩的文件大小限制，单位是字节，默认为 0
   • disable : false：是否禁用压缩，默认为 false
   • deleteOriginFile ：压缩后是否删除原文件，默认为 false
   • algorithm ：采用的压缩算法，默认是 gzip
   • ext ：生成的压缩包后缀

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

3. 打包输出效果

通过上面可以明显的看出开启Gzip与不开启存在明显的差别

4. 第三步就是配置我们的Nginx

    server{
        #gzip
        #开启gzip功能
        gzip on; 
        #开启gzip静态压缩功能
        gzip_static on; 
        #gzip缓存大小
        gzip_buffers 4 16k;
        #gzip http版本
        gzip_http_version 1.1;
        #gzip 压缩级别 1-10 
        gzip_comp_level 5;
        #gzip 压缩类型
        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; 
        gzip_vary on; 



    }

5. 浏览器输入你的项目地址就可以访问了

如何测试网页性能？

这里我用的是Lighthouse去测试的,这个功能谷歌浏览器是有集成的，所以直接在浏览器上使用就可以，通过选择你自己想要的指标点击生成报告即可。

• 最后测试部分截图（以下是测试项目的数据）