vite打包中性能优化方面

vite,打包,性能,优化,方面 · 浏览次数 : 205

小编点评

**1. 静态文件按类型分包 build 中添加代码** ```rollupOptions: { output: { chunkFileNames: 'static/js/[name]-[hash].js', entryFileNames: 'static/js/[name]-[hash].js', assetFileNames: 'static/[ext]/[name]-[hash].[ext]', } } ``` **2. 超大静态资源拆分(代码分割) build里的output设置内，添加以下代码方法1：manualChunks** ``` manualChunks: { // vue vue-router合并打包 vue: ['vue', 'vue-router'], echarts: ['echarts'], lodash: ['lodash'], // 两个文件合并成一个helloWorld文件 helloWorld: ['src/components/HelloWorld.vue','src/components/HelloWorld1.vue'], ... } ``` **3. gzip静态资源压缩** * npm i vite-plugin-compression -D * 在 plugins 配置数组里添加 gzip 插件 ``` plugins: [ viteCompression({ verbose: true, disable: false, threshold: 10240, algorithm: 'gzip', ext: '.gz', }) ] ``` **4. 启用gzip静态资源压缩** * 在 nginx 中添加 `gzip_static` 虚拟服务器配置 ``` gzip on; # 允许压缩的页面最小字节数, 默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大 gzip_min_length 1k; ``` **5. 其他配置** * 设置客户端压缩，减少服务器处理资源 ``` npm i vite-plugin-compression -D ``` **6. 为什么我们选择Vite而不选择Webpack？** * vite 服务启动更快 webpack打包时必须优先抓取并构建你的整个应用，然后才能提供服务。 * vite 通过在一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间。

正文

1、静态文件按类型分包

build中添加如下代码：

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

2、超大静态资源拆分(代码分割)

build里的output设置内,添加以下代码
方法1:

 manualChunks: {
                // vue vue-router合并打包
                vue: ['vue', 'vue-router'],
                echarts: ['echarts'],
                lodash: ['lodash'],
                // 两个文件合并成一个helloWorld文件
                helloWorld: ['src/components/HelloWorld.vue','src/components/HelloWorld1.vue'],
                ...
            }

方法2:

//最小化拆分包
 manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }

3、gzip静态资源压缩

3.1客户端开启：

 npm i vite-plugin-compression -D
//引入
import viteCompression from 'vite-plugin-compression'
//在plugins配置数组里添加gzip插件
 plugins: [viteCompression({
    verbose: true,
    disable: false,
    threshold: 10240,
    algorithm: 'gzip',
    ext: '.gz',
  })]
//在niginx添加
  gzip_static on;

3.2服务端开启

//直接在nginx添加
      # 开启或者关闭gzip模块(on|off)
    gzip on;
    # 允许压缩的页面最小字节数, 默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大
    gzip_min_length 1k; 
    # 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。例如 4 4k 代表以4k为单位，按照原始数据大小以4k为单位的4倍申请内存。
    gzip_buffers 4 16k; 
    # 识别http的协议版本。由于早期的一些浏览器或者http客户端，可能不支持gzip自解压，用户就会看到乱码，所以做一些判断还是有必要的。
    #gzip_http_version 1.0;
    # gzip压缩比，1 压缩比最小处理速度最快，9 压缩比最大但处理最慢（传输快但比较消耗cpu）。
    gzip_comp_level 2;
    # 匹配MIME类型进行压缩，（无论是否指定）"text/html"类型总是会被压缩的。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    # 和http头有关系，加个vary头，给代理服务器用的
    gzip_vary off;
    # 表示IE6及以下禁止压缩
    gzip_disable "MSIE [1-6]\.";

3.3 分析：

个人建议使用客户端压缩，减少服务器处理资源
可参考：链接

4、清除console和debugger

build里添加terserOptions配置

terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },

5、为什么我们选择Vite而不选择Webpack？

vite服务启动更快
webpack打包时必须优先抓取并构建你的整个应用，然后才能提供服务。所以对于大型项目当我们执行npm run serve时通常需要几分钟，即使是热更新甚至也需要几秒。
Vite 通过在一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间。依赖使用esbuild进行依赖预构建，源码就是我们代码中写的业务组件.vue,.ts文件等，是esmodule的形式，一方面浏览器可以直接解析esmodule,另一方面，我们可以通过动态导入，路由懒加载的方式，只有当路由跳转到对应页面才去加载该页面的资源。
vite服务热更新更快
在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活[1]（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。
Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

参考文献

https://blog.csdn.net/shinjie1210/article/details/122473024
https://www.cnblogs.com/caofeng11/p/13935383.html