自定义Vite插件
1. 创建插件函数
- Vite插件是一个包含 name 属性和 transform （或其他钩子函数）的对象。 name 是插件名称， transform 用于转换代码。
- 例如，创建一个简单的插件，将代码中的 console.log 替换为自定义的日志函数。
function customPlugin() {
return {
name: 'custom - console - log - plugin',
transform(code, id) {
return {
code: code.replace('console.log', 'customLog'),
map: null // 如果需要source - map，可以在这里添加
};
}
};
}
2. 在Vite配置中使用插件
- 在 vite.config.js 文件中，将自定义插件添加到 plugins 数组中。
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [customPlugin()]
});
Vite优化
1. 代码分割
- Vite默认会进行基于动态导入的代码分割。可以通过合理的动态导入来减小初始加载包的大小。
- 例如，有一个包含多个页面组件的应用，只有在访问某个页面时才加载对应的组件。
javascript 复制
// 在路由文件中
import { createRouter, createWebHistory } from 'vue - router';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/page1',
component: () => import('./components/Page1.vue')
},
{
path: '/page2',
component: () => import('./components/Page2.vue')
}
]
});
2. 优化构建缓存
- Vite在构建过程中会利用缓存来提高构建速度。可以通过合理配置 server 选项来优化开发时的缓存。
- 例如，设置 server.fs.strict 为 false ，这样Vite在开发服务器启动时不会严格检查文件系统，可能会加快启动速度。
export default defineConfig({
server: {
fs: {
strict: false
}
}
});
3. 优化CSS
- 可以使用 postcss - preset - env 等工具来优化CSS。首先安装 postcss - preset - env 。
npm install postcss - preset - env - D
- 然后在 vite.config.js 中配置CSS的 postcss 选项。
import postcssPresetEnv from 'postcss - preset - env';
export default defineConfig({
css: {
postcss: {
plugins: [
postcssPresetEnv()
]
}
}
});
)
