例子,vue3導(dǎo)入element-plus

打包大小

?

1.加載插件cdn-import

yarn add vite-plugin-cdn-import -D

2.配置vite

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    importToCDN({
      modules: [
        autoComplete("vue"),
        {
          name: "element-plus",
          var: "ElementPlus", // 根據(jù)main.ts中定義的來(lái)
          path: "https://unpkg.com/element-plus@2.2.28/dist/index.full.js",
          css: "https://unpkg.com/element-plus@2.2.28/dist/index.css",
        },
      ],
    }),
  ],
});

3.更改element-plus導(dǎo)入

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

import ElementPlus from "element-plus";
// import "element-plus/dist/index.css"; // 刪除css引入用cdn,避免重復(fù)引入

createApp(App).use(ElementPlus).mount("#app");

打包大小

?

vite 還可以打包時(shí)對(duì)文件進(jìn)行壓縮

1.加載compression插件

yarn add vite-plugin-compression -D

2.配置vite

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";
import viteCompression from "vite-plugin-compression";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    importToCDN({
      modules: [
        autoComplete("vue"),
        {
          name: "element-plus",
          var: "ElementPlus", // 根據(jù)main.ts中定義的來(lái)
          path: "https://unpkg.com/element-plus@2.2.28/dist/index.full.js",
          css: "https://unpkg.com/element-plus@2.2.28/dist/index.css",
        },
      ],
    }),
    viteCompression({
      verbose: true,
      disable: false,
      deleteOriginFile: true,
      // 對(duì)于大于1M的文件進(jìn)行壓縮
      // threshold: 1024000,
      algorithm: "gzip",
      ext: "gz",
    }),
  ],
});

打包結(jié)果

?

同時(shí)記得開(kāi)啟nginx 壓縮算法的功能文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-513848.html

server{
 ?  #gzip
 ?  #開(kāi)啟gzip功能
 ?  gzip on;
 ?  #開(kāi)啟gzip靜態(tài)壓縮功能
 ?  gzip_static on;
 ?  #gzip緩存大小
 ?  gzip_buffers 4 16k;
 ?  #gzip http版本
 ?  gzip_http_version 1.1;
 ?  #gzip 壓縮級(jí)別 1-10
 ?  gzip_comp_level 5;
 ?  #gzip 壓縮類型
 ?  gzip_types text/plain...;
 ?  gzip_vary on;
}

到了這里，關(guān)于vite配置CDN和文件壓縮的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！