Vite优化之分包策略

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

封控日子百无聊赖 打开Vite官网已经版本3了
记得Vue3刚出来时候 公司小项目就是采用的Vite Vue3开发 为此还多掉了几根为数不多的头发 现在应该很多公司项目开始使用vite这一神器 下面聊聊vite相关优化项

通过 yarn create vite 创建demo后 yarn安装依赖 报错了 说是版本不兼容 需要升级到v14.18.0及以上

升级后 yarn 安装依赖 执行yarn dev 运行项目

首次打开 592ms nice

相信对于有工作经验的开发人员来说 上手Vite并不难 cli基本提供了开箱即用的一些功能 就和webpack一样，今年五六月份 本人面试了大量前端 ，大多数面试者说起来vue头头是道 一提起来打包工具就蔫了，好吧 虽然我也不是那么清楚[尴尬]

vite的一个分包策略说白了 我理解中的 和 webpack优化手段之一的 提取公共库【 名字好多人叫的不一样 】差不多 诸如一些 DllPlugin之类的

随便找个插件在项目中引用 比如：lodash

yarn add lodash
yarn add lodash -D

随便在main.ts写点东西

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import { forEach } from 'lodash'
let list:Array<any> = []
forEach(list,(item)=>{
    console.log(item,"item")
})


createApp(App).mount('#app')

先看一下不做优化的dist：

此时会发现短短几行业务代码 因为引入了lodash 打包出来index.[hash].js多达上万行 一旦业务代码有所改变 打包【静态文件】文件hash会不同 基于浏览器缓存 不同名称文件会重新请求 【 不走缓存 】消耗性能 而lodash是安装的node_modules 一般情况下不会修改 是否能够将lodash【 第三方包 】提取出来

vite.config.ts

export default defineConfig({
  "build":{
    "minify":false,
    "rollupOptions":{
      "output":{
        "manualChunks":(id:string)=>{
          if(id.includes('node_modules')){
            return 'vendor';
          }
        }
      }
    }
  },
  plugins: [vue()]
})

如果出现类似提示

tscongif.json 添加

"lib": ["ES2017", "DOM"]

此时打包 会多出来vendor.【hash】.js 业务代码改动 后 重新打包 该文件是不变了 是可以走浏览器缓存的

最小化分割包

return id.toString().split("node_modules/")[1].split("/")[0].toString();