1. 创建项目

npm create vite =>选项目名 => vue => vue-ts

2.配置打包分析插件

安装插件：pnpm i rollup-plugin-visualizer -D

  1. //vite.config.ts
  3. import { defineConfig } from 'vite'
  4. import vue from '@vitejs/plugin-vue'
  5. import { visualizer } from 'rollup-plugin-visualizer'
  6. // https://vitejs.dev/config/
  7. export default defineConfig({
  8.   plugins: [
  9.     vue(),
  10.     visualizer({
  11.       // open: true// 打包完成后自动打开浏览器，显示产物体积报告
  12.     })
  13.   ],
  14.   server: {
  15.     open: true
  16.   },
  17.   build: {
  18.     rollupOptions: {
  19.       external: ['vue']
  20.     }
  21.   }
  22. })

执行npm run build 后可以看到包体积分析

image.png

3.给tsconfig.json点注释

  • tsconfig.json

    1. {
    2. "compilerOptions": {
    3.   "target": "ESNext", //目标语言版本
    4.   "useDefineForClassFields": true, //emit ECMAScript-符合标准的类字段
    5.   "module": "ESNext", //模块化标准
    6.   "moduleResolution": "Node", //模块解析策略，ts默认用node的解析策略，即相对的方式导入
    7.   "strict": true, //严格模式
    8.   "jsx": "preserve", //支持jsx
    9.   "sourceMap": true, //生成sourceMap
    10.   "resolveJsonModule": true, //启用导入.json文件
    11.   "isolatedModules": true, //确保每个文件都可以安全地传输，而不依赖于其他导入
    12.   "esModuleInterop": true, //允许export=导出，由import from 导入
    13.   "lib": ["ESNext", "DOM"], //TS需要引用的库，即声明文件，如需要使用es的高级版本特性，通常都需要配置
    14.   "skipLibCheck": true //跳过类型检查所有 d.ts文件
    15. },
    16. "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], //只编译的文件
    17. "references": [{ "path": "./tsconfig.node.json" }] //引用的工程
    18. }

  • tsconfig.node.json

    1. {
    2. "compilerOptions": {
    3.   "composite": true, //启用允许将类型脚脚本项目与项目引用一起使用的约束
    4.   "module": "ESNext", //指定所生成的模块代码
    5.   "moduleResolution": "Node", // 指定TypeScript如何从给定的模块指定符中查找文件
    6.   "allowSyntheticDefaultImports": true //当模块没有默认导出时，允许“从y导入x”
    7. },
    8. "include": ["vite.config.ts"] //只编译的文件
    9. }