nonzzz / vite-plugin-compression

vite plugin. compress your bundle file.
MIT License
161 stars 9 forks source link

Many JS files are not compressed when using build dir !== dist #26

Closed ptmkenny closed 1 year ago

ptmkenny commented 1 year ago

Bug report 🐞

When vite -> build -> output -> dir is not dist, most of the files don't get compressed.

My app has 25 JS files.

When dir: 'build',, only 1 file is gzipped.

When dir: 'test_directory',, only 1 file is gzipped.

When dir: 'dist',, all 25 files are gzipped.

So it seems the problem is that only dist is supported as a build directory.

Using 0.8.4, my vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { lingui } from '@lingui/vite-plugin';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';
import compression from 'vite-plugin-compression2';
import eslint from 'vite-plugin-eslint';

// Unix timestamp.
const fileDate = Date.now();

// https://vitejs.dev/config/
export default ({ mode }) => {

  return defineConfig({
    build: {
      // Minimum size of assets; anything smaller than this will be inlined.
      assetsInlineLimit: 4096,
      cssCodeSplit: true,
      rollupOptions: {
        // Hide react-query warnings for server components.
        onwarn(warning, warn) {
          if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
            return;
          }
          warn(warning);
        },
        output: {
          // This MUST be the same dir as specified in capacitor.config.ts.
          // Otherwise, capacitor will launch to a blank screen.
          dir: 'build',
          experimentalMinChunkSize: 10000,
          manualChunks: {
            // CKEditor5 by itself is over 500 Kb, so split out the engine.
            editorEngine: ['@ckeditor/ckeditor5-engine'],
          },
        },
      },
      sourcemap: false,
    },
    plugins: [
      eslint(),
      react({
        // Needed for lingui.
        babel: {
          plugins: ['macros'],
        },
      }),
      ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') }),
      lingui(),
      compression({
        algorithm: 'gzip',
        exclude: [/\.(br)$ /, /\.(gz)$/],
        deleteOriginalAssets: false,
      }),
    ],
  });
};

Version & Environment

0.8.4, macOS + Ubuntu

Thanks for creating this awesome plugin!

nonzzz commented 1 year ago

Thanks for your feedback. I create a minimalist example in my local environment. And i using your conf. It's don't look right.According your conf. I guess you want to define the output directory by custom. I think you can set outDir for build instead of setting dir on ontput in rollupOptions :)

nonzzz commented 1 year ago

I will follow this issue. Because the behavior of setting dir in rollupOption is not the same as directly setting outDir

ptmkenny commented 1 year ago

Thank you for the amazingly fast response!

I tried with outDir instead of output: dir and all the files are compressed. I will try with this and see if I can get it working.

nonzzz commented 1 year ago

See. According this line. we can know rollupOptions will override all Vite.js default output option. And vite-plugin-compression2 is using build.outDir.I can't find a good way to balance it :(