compress assets after static generation #2079

Open oupala opened 4 years ago

Feature request

As some static server does not support on-the-fly compression, but can serve pre-generated compressed asset, it would be great if VuePress can generate a compressed version of each generated asset. This would ease hosting in solution like GitLab pages.

What problem does this feature solve?

This feature request would make static easier and more performing.

What does the proposed API look like?

Just add a plugin or a parameter to gzip all assets.

How should this be implemented in your opinion?

It could be implemented in GitLab CI, by adding a job for that. But it would be better to have a solution on VuePress side, so that we are independent of the CI solution.

Are you willing to work on this yourself?

I'm not skilled enough to do that. But I'm willing to help by trying and testing the solution.

I don't think it needs any changes in Vuepress. You can use the vuepress config and configureWebpack to configure the webpack compression plugin. See https://webpack.js.org/plugins/compression-webpack-plugin/

Unfortunately there is an issue using the CompressWebpackPlugin with VuePress. The compressed app.xxx.js.gz file is missing (window.webpackJsonp = window.webpackJsonp || []).push([[0], []]); at the beginning which the app.xxx.js contains. This causes all of the JavaScript to stop working.

Minimal repro config.js:

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  configureWebpack: {
    plugins: [new CompressionPlugin()],
  },
};

Create two .md files that link to each other and observe how following the link causes the whole page to reload. Removing the CompressionPlugin restores client-side navigation.

For now I'm just using the gzip command instead (e.g. gzip --keep --recursive --best path/to/dist) which works fine except that it's lacking some useful options such as minRatio.

Is this issue coming from the VuePress side or from the CompressWebpackPlugin side?

And if the CompressWebpackPlugin is able to compress assets, it should be embedded in the default VuePress webpack configuration so that assets are compressed by default.

Compressing assets is mandatory to achieve performance.

Not sure where the issue lies, didn't look into it too much since there was an easy workaround with the gzip command.

Same question as @oupala and although using gzip on the generated assets as a workaround, as mentioned by @Livven is fine, It would be amazing if someone with expertise in VuePress and WebPack could have a look at this! Thank You!

3120 It has been solved. Please look at this

vuejs / vuepress