前言
入职新公司,接手之前的项目,项目用vite+vue3构建,使用npm进行管理。希望能统一使用pnpm进行包管理,于是有了这一次的优化。
优化之前的配置
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { loadEnv } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default ({ command, mode }) => {
const env = loadEnv(mode, process.cwd())
const alias = {
'@': resolve(__dirname, 'src'),
}
return {
base: env['VITE_PUBLIC_PATH'],
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "src/style/index.scss";'
}
}
},
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
eslintrc: {
enabled: false,
},
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias,
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
server: {
host: env['VITE_APP_HOST'],
port: env['VITE_APP_PORT'],
https: false,
open: true,
proxy: {
'/api': {
target: env['VITE_APP_DEV_URL'],
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
},
strictPort: false,
},
build: {
sourcemap: true,
chunkSizeWarningLimit: 1000,
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
},
minify: 'terser',
terserOptions: {
compress: {
drop_console: false,
drop_debugger: false,
},
},
}
}
}
存在的问题&优化思路
1.构建后白屏
之前使用npm构建的时候是没问题的,很明显是切换至pnpm之后造成的,且打包之后dist中出现了名字中带有.pnpm.js和.pnpm.css相关的文件,问题应该是出现在代码分割这里,由于使用了pnpm,node_modules中会有一个叫.pnpm的文件夹,之前的代码把这个文件夹也进行了分割
2.打包后有缓存。
这个属于比较常见的问题了,主要还是通过在文件名后面添加时间戳来解决
3.打包后dist文件夹目录结构不美观
所有的文件都在assets文件夹下,希望能像之前webpack一样,根据文件夹区分
4.生产环境移除console没有生效
查阅vite文档,发现terser需要另外安装相关的npm包,实际上vite默认使用esbuild,自带了console移除
5.写配置项的时候编辑器没有智能提示
使用defineConfig
6.生产环境没有关闭sourcemap
根据环境变量判断即可
优化后的代码
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite' // 解决问题五
import { resolve } from 'path'
import { loadEnv } from 'vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// import { visualizer } from "rollup-plugin-visualizer"; // 打包分析
const time = new Date().getTime(); // 当前时间戳,防止缓存
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd())
return {
base: env['VITE_PUBLIC_PATH'],
// 服务端配置
server: {
host: '0.0.0.0',
port: env['VITE_APP_PORT'],
https: false,
open: true,
proxy: {
'/api': {
target: env['VITE_APP_DEV_URL'],
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
},
strictPort: false,
},
// 插件配置
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
eslintrc: {
enabled: false,
},
}),
Components({
resolvers: [ElementPlusResolver()],
}),
// 打包分析插件引入
// visualizer({
// open: true
// }),
],
// 解析配置
resolve: {
// 路径别名
alias: {
'@': resolve(__dirname, 'src')
},
// 免后缀
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
css: {
// scss全局变量注入
preprocessorOptions: {
scss: {
additionalData: '@import "src/style/index.scss";'
}
}
},
// 构建配置
build: {
// 生产环境不生成sourcemap,减小体积,解决问题六
sourcemap: env.VITE_NODE_ENV === 'production' ? false : true,
chunkSizeWarningLimit: 1000,
rollupOptions: {
output: {
// 使用时间戳拼接在文件名后面,防止浏览器缓存,解决问题二
chunkFileNames: `static/js/[name].[hash]${time}.js`,
entryFileNames: `static/js/[name].[hash]${time}.js`,
// 根据文件后缀生成文件夹,对dist目录中的文件进行归类,解决问题三
assetFileNames: `static/[ext]/[name].[hash]${time}.[ext]`,
// 代码分割改为指定要分割的库,解决问题一
manualChunks: {
vue: ['vue', 'vue-router'],
pinia: ['pinia', 'pinia-plugin-persist'],
xlsx: ['xlsx'],
'lodash-es': ['lodash-es'],
'element-plus': ['element-plus'],
'vue3-ace-editor': ['vue3-ace-editor'],
},
}
},
// 如果要使用terser移除console,需要先npm安装terser,然后把这里改为terser,由于vite默认使用esbuild,这里不需要配置
// minify: 'esbuild',
},
// 生产环境时移除console.log(),解决问题四
esbuild: {
drop: env.VITE_NODE_ENV === 'production' ? ['console', 'debugger'] : []
}
}
})