vite 本地运行首次进入页面加载慢问题

news2024/11/21 0:21:21

思考

vite的适用场景是什么？
由于我使用了tailwindcss插件使用webpack 每次启动所有的项目的css样式都预先使用tailwindcss 转换成css 性能普通的电脑启动项目需要1分钟到2分钟。不过首次加载不会有什么多大的延迟，按需导入的页面加载也不会有多大的延迟，但webpack下运行的tailwindcss有个问题就是修改样式后动态编译运行后查看样式很卡长时间修改样式很吃内存运行久了就会挤爆内存。
现在vue3很流行使用vite打包，所以我也尝试使用vite。webpack 切换到vite，如果单看命令行中的运行，运行完毕不到一秒,不过首次打开页面则需要等10秒到20秒左右的处理时间请求数量达到了132个（浏览器对于这种并发请求会产生阻塞的），这里的文件最大了也是tailwindcss，并且打开按需加载的页面路由时，还需要经过tailwindcss编译css，打开未打开过的页面还需等几秒时间，这个体验非常差。

在这里插入图片描述

vite 预打包

由于vite需要动态解析依赖，然后再打包。原理参考vite 依赖预构建。所以首次打开页面解析打包会很慢，因为vite 默认依赖构建达不到预期官方提供了依赖优化选项让开发者实现添加依赖项 optimizeDeps.exclude或者排除依赖项 optimizeDeps.include 这里我们使用 optimizeDeps.include添加依赖项。

添加依赖项

通常一些常见的依赖项如vue axios vue-router我们都可以知道可以添加到依赖项。但是一些样式 js文件的依赖项我们无法准确的得知。这里使用第三方插件vite-plugin-optimize-persist
来实现获取依赖项
参考文章 vite首次打开界面加载慢问题/解决
安装插件

npm i -D vite-plugin-optimize-persist vite-plugin-package-config

vite.config.ts添加配置其中 include里面就是需要添加的依赖项

// 自动生成 预打包
import OptimizationPersist from "vite-plugin-optimize-persist";
import PkgConfig from "vite-plugin-package-config";

export default ({ mode }) => {
   plugins: [
      vue(),
      //自动生成 预打包
      PkgConfig(),
      OptimizationPersist(),
      
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
     optimizeDeps: {
      include: [
        "element-plus/es",
        "element-plus/es/components/config-provider/style/css",
        "element-plus/es/components/container/style/css",
        "element-plus/es/components/main/style/css",
        "element-plus/es/components/header/style/css",
        "element-plus/es/components/date-picker/style/css",
        "element-plus/es/components/drawer/style/css",
        "element-plus/es/components/image/style/css",
        "element-plus/es/components/image/style/css",
        "element-plus/es/components/table/style/css",
        "element-plus/es/components/table-column/style/css",
        "element-plus/es/components/input/style/css",
        "element-plus/es/components/dropdown/style/css",
        "element-plus/es/components/popover/style/css",
        "element-plus/es/components/dropdown-item/style/css",
        "element-plus/es/components/dropdown-menu/style/css",
        "element-plus/es/components/pagination/style/css",
        "element-plus/es/components/scrollbar/style/css",
        "element-plus/es/components/dialog/style/css",
        "element-plus/es/components/loading/style/css",
        "element-plus/es/components/tabs/style/css",
        "element-plus/es/components/tab-pane/style/css",
        "element-plus/es/components/select/style/css",
        "element-plus/es/components/option/style/css",
        "vue",
        "pinia",
        "jquery",
        "sass",
        "vue-router",
        // "tailwindcss",
        "tailwindcss/plugin",
      ],
    },
}

原本插件应该是在 package.json 中自动生成类似于 “vite”: {
“optimizeDeps”: {
“include”: [
// managed by vite-plugin-optimize-persist
“@material-ui/core/Accordion”,
“@material-ui/core/AccordionSummary”,
“@material-ui/core/Dialog”,
“@material-ui/core/DialogActions”,
“@material-ui/icons/Dehaze”,
“date-fns/format”,
“lodash/debounce”,
“lodash/map”
]
}
}
的依赖项的。但是我打开页面发现package.json未自动生成依赖项。
所以我手动在vite.config.ts 添加依赖项首次打开页面时，当’‘include’'中的数组不包含该依赖项时命令行会提示出来添加进去即可。
// 依赖项命令行提示
在这里插入图片描述
添加依赖项后命令行运行完毕慢几百毫秒但是按需加载页面的加载速度可以得到提升