vite知识总结

1 vite不支持commonjs的语法

1. 下载安装：npm install @rollup/plugin-commonjs 
2. 引入配置:vite.config.xx
	import commonjs from '@rollup/plugin-commonjs';
	export default defineConfig({
    plugins: [
    	commonjs(), //要放在第一行 
    	vue()
    ]
  });

2、vue3 + vite项目build后，运行本地服务，查看打包后结

1)、全局安装： npm install -g serve
2)、vite.conifg.js中
export default defineConfig({
	base: './',
})
3)、request.js中
import Axios form 'axios/dist/axios'
const service = Axios.create({
	baseURL: '代理中配的路径'  
})
4)、执行打包命令npm run build
再执行serve -s dist

3、配置环境变量

proxy在开发阶段生效，生产阶段不生效，为了保证开发阶段和生产阶段 随意切换（不用每次都手动修改，所以配置环境变量）。

import.meta.env.MODE=='development' ：开发阶段
import.meta.env.MODE=='production' ：生产阶段

4、检查源码分析

1. 下载：npm i rollup-plugin-visualizer -D
2. 引入配置：vite.config.xx
	import { visualizer } from 'rollup-plugin-visualizer'
	export default defineConfig({
		plugins:[
			//...其他
			visualizer({
				filename:'zhangsan.html',
				open:true,//打包，自动打开html
			})
		]
	})

5、CDN

1. 下载：npm install vite-plugin-cdn-import --save-dev
2. 引入：vite.config.xx
		import { Plugin as importToCDN } from 'vite-plugin-cdn-import'
		export default defineConfig({
      plugins: [
        importToCDN({
          // prodUrl: 'https://cdn.jsdelivr.net/npm/{name}@{version}/{path}',
          modules: [
            {
              name: 'vue',
              var: 'Vue',
              path: `https://unpkg.com/vue@3.2.45/dist/vue.global.js`,

            },
            {
              name: 'vue-demi',
              var: 'VueDemi',
              path: `https://unpkg.com/vue-demi@0.13.11`,
            },
            {
              name: 'vue-router',
              var: 'VueRouter',
              path: `https://unpkg.com/vue-router@4.1.6`,
            },
            {
              name: 'element-plus',
              var: 'ElementPlus',
              path: 'https://unpkg.com/element-plus@2.3.3/dist/index.full.js',
              // css: 'https://unpkg.com/element-plus@2.3.3/dist/index.css'
            },
          ],
        })
      ],
	})

6、剔除console和debugger

1. 下载：npm install terser -D
2. 配置：vite.config.xx
		export default defineConfig({
			build:{
        minify:'terser',//启用terser压缩
          terserOptions:{
              compress:{
                //pure_funcs:['console'],//只清除console
                drop_console:true,//清除所有console
                drop_debugger:true,//清除所有drop_debugger
              }
          }
		}
	}

7、gzip压缩

1. 下载：npm install vite-plugin-compression -D
2. 配置：vite.config.xx
	import viteCompression from 'vite-plugin-compression'
	export default defineConfig({
		plugins:[
            viteCompression({
                verbose:true,//是否在控制台输出压缩结果
                threshold:10240,//体积大于多少，才会压缩
                algorithm:'gzip',//压缩算法
                ext:'.gz',//文件后缀名
            })
	     ]
      })

8、目录优化 + 分包

export default defineConfig({
	build:{
		rollupOptions: {
			//1. 目录优化
			output: {
				// 静态资源打包做处理
				chunkFileNames: 'static/js/[name]-[hash].js',
				entryFileNames: 'static/js/[name]-[hash].js',
				assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
				//2. node_modeuls依赖单独打包出去
				manualChunks(id) {
					//参数 ID，就是所有文件的绝对路径
					//将 node_modules中的代码单独打包成一个js文件
					if (id.includes('node_modules')) {
						//因为node_modules中的依赖需要单独打包出去
						//这里的return的值就是打包的文件名称
						return id.toString().split('node_modules/')[1].split('/')[0].toString();
					}
				}
			}
		}
	} 
})

9、打包出现内存溢出的问题

原因：系统规定了一个固定值的大小，如果项目整体包超过这个大小，就打包不成功，会在控制台报错。
解决：
	1. 修改node_modules里面一个文件，把值变大。
	2. 修改package.json的build，添加值让他变大。
		 "scripts": {
        "dev": "vite",
        "build": "NODE_OPTIONS=--max-old-space-size=4096 vite build",
        "preview": "vite preview"
      },
	3. 通过插件可以操作（vite.config.xx)文件中引入配置