vite打包优化

目录

一，现在系统没有任何打包优化设置的情况

二，优化项一，静态资源的打包处理（按分类存放相应的文件）

三，解决下列提示的警告 

解决方式一，提高静态资源的容量大小

解决方式二：超大静态资源拆分

四：gzip静态资源压缩

五，清除console和debugger

六，完整的vite.config.ts

---

一，现在系统没有任何打包优化设置的情况

现在存在下列问题问题：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,
            },
        },
    },
});

参考博客：vite打包配置(静态资源合并打包/清除log/gzip压缩/ENV配置等)