Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

With Rollup, ES output mode and gzip plugin, dynamic imports point to the JavaScript file instead of the .gz.js file.

I am currently utilizing Rollup to export my bundle in the form of ES6 modules. I am also incorporating the gzip plugin to produce versions for both .gz.js and .js chunks. Despite this, the import statement in the output and its corresponding gzipped version reference the .js file instead of the .gz.js file. How can I reconfigure the Rollup config/plugins to ensure the import reference in the exported files is intended for the right .gz.js files? Here is the code for the configuration and plugins: 
    output: {
        format: 'es',
        dir: `dist`,
        sourcemap: true,
    },
    plugins: [
...
        gzipPlugin({
            fileName: (fileName) => {
                const name = fileName.split('.');
                name.splice(-1, 0, 'gz');
                return name.join('.');
            },
        }),
...
    ]
Also, check out the following screenshot depicting what I want to achieve: app.min.js
Answers(2)
avatar
Vogi
a month ago
Verified Answer
It seems like you are trying to configure the Rollup config/plugins to ensure the import reference in the exported files is intended for the right .gz.js files. You can try using the rollup-plugin-gzip plugin instead of gzip-plugin. This plugin creates a compressed .gz / .br artifact for your Rollup / Vite bundle. Here is an example configuration that you can use: 
import gzipPlugin from 'rollup-plugin-gzip';
import {terser} from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es',
    plugins: [
      terser(),
      gzipPlugin({
        customCompression: content => {
          return zlib.gzipSync(content);
        },
        fileName: '.gz',
      }),
    ],
  },
};
This configuration uses rollup-plugin-gzip and rollup-plugin-terser plugins to create a compressed .gz artifact for your Rollup bundle. I hope this helps! Let me know if you have any other questions.

Sources

rollup-plugin-gzip - npmjavascript - Using Rollup, ES output mode and gzip plugin, dynamic ...GitHub - osdevisnot/rollup-plugin-sizeme: display brotli and gzip sizes ...Arnesfield/rollup-plugin-output-size - Githubjavascript - Output multiple files using Rollup - Stack Overflow
avatar
Tolerim
a month ago
Unfortunately, Rollup doesn't have native support for serving .gz files yet. However, you can use the rollup-plugin-brotli plugin to generate .br files along with the .js and .gz files. Here's an example of how you can use it: 
import brotli from 'rollup-plugin-brotli';
import gzip from 'rollup-plugin-gzip';

export default {
  input: 'src/main.js',
  output: {
    format: 'es',
    dir: 'dist',
    sourcemap: true,
  },
  plugins: [
    gzip(),
    brotli(),
  ],
};
With this configuration, Rollup will generate three files for each chunk: .js, .gz, and .br. You can use them in your HTML like this: 
<script type="module" src="path/to/chunk.js"></script>
<script type="module" src="path/to/chunk.js.gz" data-encoding="gzip"></script>
<script type="module" src="path/to/chunk.js.br" data-encoding="br"></script>
Note that you need to specify the data-encoding attribute to let the browser know how to decompress the file. If you still want to use the rollup-plugin-gzip plugin to generate .gz files, you can use the rollup-plugin-replace plugin to replace the .js file extension with .gz.js in the import statements. Here's an example: 
import replace from 'rollup-plugin-replace';
import gzipPlugin from 'rollup-plugin-gzip';

export default {
  input: 'src/main.js',
  output: {
    format: 'es',
    dir: 'dist',
    sourcemap: true,
  },
  plugins: [
    gzipPlugin({
      fileName: (fileName) => {
        const name = fileName.split('.');
        name.splice(-1, 0, 'gz');
        return name.join('.');
      },
    }),
    replace({
      values: {
        '.js': '.gz.js',
      },
      delimiters: ['', ''],
      include: '**/*.js',
    }),
  ],
};
With this configuration, the import statements in the outputted code will reference the .gz.js file instead of the .js file. 
// Before:
import { someModule } from './someModule.js';

// After:
import { someModule } from './someModule.gz.js';
;