目录
一,现在系统没有任何打包优化设置的情况
现在存在下列问题问题:1,所有的文件都在assets目录下
2,单个文件过大,出现警告
3,包的大小没有经过处理
二,优化项一,静态资源的打包处理(按分类存放相应的文件)
build: {
outDir: 'JcCloudWeb',
cssCodeSplit: true,
rollupOptions: {
input: 'index.html',
output: {
// 静态资源打包做处理
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
},
},
},
},
打包后生成的结构目录为:
结果:文件分类存放整洁多了
三,解决下列提示的警告
解决方式一,提高静态资源的容量大小
build: {
chunkSizeWarningLimit: 1500,
}
这种方式只是解决了提示问题,解决不了根本问题。
解决方式二:超大静态资源拆分
如果不拆分:我们会发现生成的单个文件巨大,element-plus等第三方库,都不会单独抽离出来,跟业务逻辑代码混在一起,文件巨大。没拆分前js文件夹有190个js文件。
解决办法:还是老样子,我们在build里的output设置内,添加以下代码
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
build: {
outDir: 'JcCloudWeb',
cssCodeSplit: true,
rollupOptions: {
input: 'index.html',
output: {
// 静态资源打包做处理
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
},
},
},
},
再次 npm run build,文件就被拆开了,而不是所有引入的js都拼在一起。拆分后文件个数变成了206个,多了15个。单个文件也变小了。
但是还是有个700多kb的echarts插件和500多kb的element-puls....所以按需引入eleplus和选择合适的插件还是很重要的。
四:gzip静态资源压缩
那么大文件也不能放任自流,我们还是可以通过gzip压缩来处理一下的先安装插件,控制台输入。
npm i vite-plugin-compression -D
然后修改vite.congfig.js页面,引入并在plugin内使用
import viteCompression from 'vite-plugin-compression'
//在plugins配置数组里添加gzip插件
plugins: [viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
})],
npm run build
打开build之后的js文件,生成了相应的压缩文件
对比一下,没压缩之前的文件,确实小了很多。
缺点:就是打包后的文件会变大。没压缩之前文件是11.9M ,开启gzip静态资源压缩打包后的文件是14.9M
五,清除console和debugger
解决方式:添加如下代码,去除打包后的console.log
build: {
minify: 'terser',
terserOptions: {
// 清除console和debugger
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
再次打包生成后的js文件中,就几乎没有console.log以及debugger了
六,完整的vite.config.ts
import path from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
import AutoImport from 'unplugin-auto-import/vite';
import WindiCSS from 'vite-plugin-windicss';
import viteCompression from 'vite-plugin-compression';
import { visualizer } from 'rollup-plugin-visualizer'
const pathSrc = path.resolve(__dirname, 'src');
export default defineConfig({
resolve: {
alias: {
'@/': `${pathSrc}/`,
},
},
plugins: [
vueJsx(),
WindiCSS(),
vue(),
visualizer(),
viteCommonjs(),
// 自动导入vue3的hooks
AutoImport({
resolvers: [ElementPlusResolver()],
imports: ['vue', 'vue-router', 'vuex', '@vueuse/core'],
// 生成路径
dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
}),
//自动导入组件
Components({
resolvers: [
ElementPlusResolver({
importStyle: 'sass',
}),
],
dts: path.resolve(pathSrc, 'components.d.ts'),
}),
//不知道后端是否支持,暂时注释掉
// viteCompression({
// // gzip静态资源压缩配置
// verbose: true,
// disable: false,
// threshold: 10240,
// algorithm: 'gzip',
// ext: '.gz',
// }),
],
server: {
watch: { usePolling: true },
open: false,
hmr: true,
/* 设置为0.0.0.0则所有的地址均能访问 */
host: '0.0.0.0',
port: 8080,
https: false,
proxy: {
'/api': {
/* 目标代理服务器地址 */
target: 'http://xxx:9000/',
/* 允许跨域 */
changeOrigin: true,
},
},
},
build: {
outDir: 'JcCloudWeb',
minify: 'terser',
cssCodeSplit: true,
chunkSizeWarningLimit: 1500,
rollupOptions: {
input: 'index.html',
output: {
// 静态资源打包做处理
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
},
},
},
terserOptions: {
// 清除console和debugger
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
});