李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

前端项目打包 vite.config.js 配置 gzip/br 压缩 ​

使用 vite 创建一个 vue 项目 ​

https://cn.vitejs.dev/

检查你的 node.js 版本 ​

powershell
PS C:\Users\Administrator\Desktop> node -v
v18.20.2

创建一个 vue3 gzip br 项目 ​

powershell
PS C:\Users\Administrator\Desktop> npm create vite@latest
√ Project name: ... vue3-gzip-br
√ Select a framework: » Vue
√ Select a variant: » Customize with create-vue ↗

Vue.js - The Progressive JavaScript Framework

√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是

正在初始化项目 C:\Users\Administrator\Desktop\vue3-gzip-br...

项目初始化完成，可执行以下命令：

  cd vue3-gzip-br
  npm install
  npm run format
  npm run dev

PS C:\Users\Administrator\Desktop>  cd vue3-gzip-br
PS C:\Users\Administrator\Desktop\vue3-gzip-br> code .
PS C:\Users\Administrator\Desktop\vue3-gzip-br>

配置.npmrc 文件 ​

创建.npmrc 文件

bash
# mac: touch .npmrc
ni .npmrc

.npmrc

registry=https://registry.npmmirror.com

安装模块依赖 ​

bash
npm install

本地启动 ​

bash
npm run dev

dev 增加--host 参数

json
"scripts": {
    "dev": "vite --host", // 启动 Vite 开发服务器，并绑定到所有网络接口，允许局域网内其他设备访问
    "build": "vite build", // 构建生产环境的代码
    "preview": "vite preview", // 在本地启动一个服务器来预览构建的产物
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore", // 运行 ESLint 以检查和修复代码问题
    "format": "prettier --write src/" // 使用 Prettier 格式化 src 目录下的代码
  },

  1. "dev": "vite"：这个命令启动了一个 Vite 开发服务器，它默认绑定到 localhost。这意味着服务器只能通过本机访问。

  2. "dev": "vite --host"：添加了 --host 参数后，Vite 开发服务器会绑定到所有网络接口上。这样，你的开发服务器就可以接受来自同一局域网内其他设备的连接，例如，其他电脑、手机等可以访问你的开发服务器。这在多设备测试和团队合作中非常有用。

打包构建 ​

bash
npm run build

git 初始化项目 ​

bash
git init
bash
git add .
bash
git commit -m 'feat: first commit'

配置 vite.config.js gzip/br 压缩 ​

安装 vite-plugin-compression

bash
npm i vite-plugin-compression -D

修改 vite.config.js 配置文件

js
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 viteCompression from "vite-plugin-compression";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    viteCompression({
      verbose: true, // 是否在控制台输出压缩结果
      disable: false, // 默认 false, 设置为 true 来禁用压缩
      threshold: 10240, // 只处理大于此大小的资源（单位：字节）。默认值为 0。
      algorithm: "gzip", // 使用 gzip 压缩
      ext: ".gz", // 输出文件的扩展名
      deleteOriginFile: false,
    }),
    viteCompression({
      verbose: true, // 是否在控制台输出压缩结果
      disable: false, // 默认 false, 设置为 true 来禁用压缩
      threshold: 10240, // 只处理大于此大小的资源（单位：字节）。默认值为 0。
      algorithm: "brotliCompress", // 使用 brotli 压缩
      ext: ".br", // 输出文件的扩展名
      deleteOriginFile: false,
    }),
    VueDevTools(),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

重新打包构建

bash
npm run build

prettier 如何配置有分号 ​

把 "semi": true,改为 "semi": false， false 是没有分号

json
{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

git commit 提交代码 ​

bash
git add .
bash
git commit -m 'feat: first commit'

配置 vite.config.js 代码分割 ​

js
// https://vitejs.dev/config/
export default defineConfig({
  // ...
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // 文件路径 id
          console.log(id);

          const chunkArray = [
            "dayjs",
            "@element-plus",
            "vue",
            "vue-router",
            "echarts",
            "pinia",
          ];

          if (
            chunkArray.find((chunk) => id.includes(`node_modules/${chunk}/`))
          ) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
        chunkFileNames: (chunkInfo) => {
          const facadeModuleId = chunkInfo.facadeModuleId
            ? chunkInfo.facadeModuleId.split("/")
            : [];
          const fileName =
            facadeModuleId[facadeModuleId.length - 2] || "[name]";
          return `js/${fileName}/[name].[hash].js`;
        },
      },
    },
  },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});