vite配置CDN和文件压缩-Toy模板网

这篇具有很好参考价值的文章主要介绍了vite配置CDN和文件压缩。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

例子,vue3导入element-plus

vite配置CDN和文件压缩

打包大小

vite配置CDN和文件压缩

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", // 根据main.ts中定义的来
          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导入

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,避免重复引入

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

打包大小

vite配置CDN和文件压缩

vite 还可以打包时对文件进行压缩

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", // 根据main.ts中定义的来
          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,
      // 对于大于1M的文件进行压缩
      // threshold: 1024000,
      algorithm: "gzip",
      ext: "gz",
    }),
  ],
});

打包结果

vite配置CDN和文件压缩

同时记得开启nginx 压缩算法的功能文章来源地址https://www.toymoban.com/news/detail-513848.html

server{
    #gzip
    #开启gzip功能
    gzip on;
    #开启gzip静态压缩功能
    gzip_static on;
    #gzip缓存大小
    gzip_buffers 4 16k;
    #gzip http版本
    gzip_http_version 1.1;
    #gzip 压缩级别 1-10
    gzip_comp_level 5;
    #gzip 压缩类型
    gzip_types text/plain...;
    gzip_vary on;
}

到了这里，关于vite配置CDN和文件压缩的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！