The slow loading of the first entry page of vite local operation

reflection

vite What is the applicable scenario of ？
Because I used tailwindcss plug-in unit Use webpack Start all projects every time css Styles are pre used tailwindcss convert to css Ordinary computer startup projects need 1 Minutes to 2 minute . However, the first load will not have much delay , There won't be much delay in loading pages imported on demand , but webpack Running down tailwindcss There is a problem that after modifying the style and dynamically compiling and running Check the style too laggy Modify the style for a long time Eat plenty of memory Running for a long time will burst the memory .
Now? vue3 Very popular vite pack , So I also try to use vite.webpack Switch to vite, If you just look at the operation in the command line , Less than a second after running , But the first time you open the page, you need to wait 10 Seconds to 20 Processing time of about seconds The number of requests has reached 132 individual （ Browsers will block such concurrent requests ）, The largest file here is also tailwindcss, And open the page route loaded on demand , It still needs to go through tailwindcss compile css, It will take a few seconds to open an unopened page , This experience is very bad .

vite prepackaged

because vite Need to dynamically resolve dependencies , And then pack it . principle Reference resources vite Rely on pre build . So open the page for the first time analysis Packing will be slow , because vite Default dependency build Not as expected The official provided Rely on optimization options Let developers add dependencies optimizeDeps.exclude Or exclude dependencies optimizeDeps.include Here we use optimizeDeps.include Add dependency .

Add dependency

Usually some common dependencies such as vue axios vue-router We all know that we can add dependencies . But some styles js We cannot accurately know the dependencies of the file . Use third-party plug-ins here vite-plugin-optimize-persist
To get dependencies
Reference resources article vite Slow loading when opening the interface for the first time / solve
install plug-in unit

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

vite.config.ts Add the configuration among include There are the dependencies that need to be added

//  Automatic generation   prepackaged 
import OptimizationPersist from "vite-plugin-optimize-persist";
import PkgConfig from "vite-plugin-package-config";

export default ({
      mode }) => {
    
   plugins: [
      vue(),
      // Automatic generation   prepackaged 
      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",
      ],
    },
}

The original plug-in should be in package.json Automatically generate Be similar to “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”
]
}
}
Of the dependency of . But I opened the page and found package.json Dependencies are not automatically generated .
So I manually vite.config.ts Add dependency When you first open a page , When ’‘include’' When the array in does not contain the dependency The command line will prompt Just add in .
// Dependency command line prompt

After adding dependencies It takes hundreds of milliseconds for the command line to finish running But the loading speed of loading pages on demand can be improved