vite配置优化

当前端资源过大时，服务器请求资源会比较慢。前端可以将资源通过Gzip压缩使文件体积减少大概60%左右，压缩后的文件，通过后端简单处理，浏览器可以将其正常解析出来。

一、gzip压缩

vite: vite-plugin-compression

**vue-cli: compression-webpack-plugin**

**npm i compression-webpack-plugin -D**

**npm i vite-plugin-compression -D**

vite.config.js

import { defineConfig } from 'vite
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    viteCompression(
      {
        algorithm: 'gzip',
        threshold: 10240,
        verbose: false,
        deleteOriginFile: true
      }
    )
  ]
})

这个配置项，我们通过algorithm指定了压缩算法为gzip；通过threshold指定文件大于10240b（10kb）时才压缩文件；通过verbose禁止在控制台输出压缩结果；通过deleteOriginFile指定压缩完文件后删除源文件

打包结果：

打包前dist文件大小：274kb

打包后：

我们看出部分文件进行了gzip压缩，并且删除了源文件。

打包后的dist文件大小：168kb，减少了100kb

二、打包出的文件整理，缓存静态资源

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

打包后结果：

三、分析打包结果

1.安装插件

npm i rollup-plugin-visualizer -D

2.在vite.config.js配置该插件

import { defineConfig,type PluginOption } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins:[
    vue(),visualizer()
  ]
})

3.运行打包命令

npm run build

4.然后会在根目录下生成一个stats.html文件

5.打开这个html文件,里面是基于echarts生成的一个交互式打包组件分析图表

6.我们可以清晰地看到每个文件的大小占比、相互依赖关系

7.如果发现某些大文件应该是代码分割的,可以Return回去,针对这部分文件做Lazy Loading处理，再次打包分析,就可以看到体积显著缩小

所以这个插件可以直观地分析出打包结果,找到问题点进行针对性优化,从而减小最终打包体积。

四、生产环境删除debugger console代码

 build: {
    // 压缩JS代码 
    minify: 'terser', 
    // 压缩CSS代码
    cssCodeSplit: true,
    // 删除console等调试语句
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }

五、拆分包

如果不同模块使用的插件基本相同那就尽可能打包在同一个文件中，减少http请求，如果不同模块使用不同插件明显，那就分成不同模块打包。这是一个矛盾体。

这里使用的是最小化拆分包。如果是前者可以直接选择返回'vendor'。

rollupOptions: {
  output: {
    manualChunks(id) {
      if (id.includes("node_modules")) {
        // 让每个插件都打包成独立的文件
        return id .toString() .split("node_modules/")[1] .split("/")[0] .toString(); 
      }
    }
  }
}

六、CDN加速

内容分发网络（Content Delivery Network，简称 CDN）就是让用户从最近的服务器请求资源，提升网络请求的响应速度。同时减少应用打包出来的包体积，利用浏览器缓存，不会变动的文件长期缓存。

使用rollup自带的external

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import { visualizer } from 'rollup-plugin-visualizer'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    visualizer({ open: true }),
  ],
  build: {
    rollupOptions: {
      external: ['vue', 'element-plus','vue-router'],   //告诉打包工具 在external配置的 都是外部依赖项  不需要打包
    },
  },
})

然后再index.html引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
    <script src="https://unpkg.com/element-plus@2.3.8/dist/index.full.js"></script>
    <script src="https://unpkg.com/vue@3.2.45/dist/vue.global.js"></script>
    <script src="https://unpkg.com/vue-router@4.1.6/dist/vue-router.global.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    
  </body>
</html>

注意：

使用 CDN 未必会加快速度，只能减小打包体积，因为对应 js 和 css 需要从远程地址读取

vite打包性能优化