vue3+vite+ts+element-plus+rollup-plugin-external-globals+vite-plugin-html，提高打包速度，提高网页打开速度

最新推荐文章于 2024-08-22 14:21:56 发布

徐同保

最新推荐文章于 2024-08-22 14:21:56 发布

阅读量306

点赞数 8

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/xutongbao/article/details/140600705

版权

优化前

优化后

装包：

yarn add rollup-plugin-external-globals

vite.config.ts:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import { visualizer } from 'rollup-plugin-visualizer'
import externalGlobals from 'rollup-plugin-external-globals'

// https://vitejs.dev/config/
export default defineConfig({
  // base: 'doc',
  server: {
    port: 3007,
    proxy: {
      '/api': {
        target: 'http://localhost:85',
        changeOrigin: true,
        rewrite: (path) => {
          console.log(path)
          return path.replace(/^\/api/, '/api')
        },
      },
    },
  },
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    visualizer(),
    {
      ...externalGlobals({
        'element-plus': 'ElementPlus',
      }),
      enforce: 'post',
      apply: 'build',
    },
  ],
  build: {
    sourcemap: true,
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

编译后的前端代码无法找到ElementPlus

装包：

yarn add vite-plugin-html

修改vite.config.ts:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import { visualizer } from 'rollup-plugin-visualizer'
import externalGlobals from 'rollup-plugin-external-globals'
import { createHtmlPlugin } from 'vite-plugin-html'

// https://vitejs.dev/config/
export default defineConfig({
  // base: 'doc',
  server: {
    port: 3007,
    proxy: {
      '/api': {
        target: 'http://localhost:85',
        changeOrigin: true,
        rewrite: (path) => {
          console.log(path)
          return path.replace(/^\/api/, '/api')
        },
      },
    },
  },
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    visualizer(),
    {
      ...externalGlobals({
        vue: 'Vue',
        'vue-demi': 'VueDemi',
        'vue-router': 'VueRouter',
        'element-plus': 'ElementPlus',
      }),
      enforce: 'post',
      apply: 'build',
    },
    createHtmlPlugin({
      inject: {
        data: {
          cdnCss: ['element-plus_2.7.7_index.css'],
          cdnJs: [
            'vue_3.4.32.js',
            'vue-demi_0.14.8_index.iife.js',
            'vue-router_4.4.0.global.js',
            'element-plus_2.7.7_index.full.js',
          ],
        },
      },
    }),
  ],
  build: {
    sourcemap: true,
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

修改index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx</title>
    <!-- 使用CDN的CSS文件 -->
    <% for (const i of cdnCss) { %>
    <link href="<%= i %>" rel="stylesheet" />
    <% } %>
    <!-- 使用CDN的JS文件 -->
    <% for (const i of cdnJs) { %>
    <script src="<%= i %>" defer></script>
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

public文件夹增加文件：