vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.75k stars 6.33k forks source link

CSS minification doesn't works if CSS filename pattern contains query string #4124

Open Vadiok opened 5 years ago

Vadiok commented 5 years ago

Version

3.8.2

Reproduction link

https://github.com/Vadiok/VueCliCssMinificationBug

Environment info

Environment Info:

  System:
    OS: Linux 4.10 Linux Mint 18.3 (Sylvia)
    CPU: (8) x64 Intel(R) Core(TM) i7-4710MQ CPU @ 2.50GHz
  Binaries:
    Node: 10.16.0 - /usr/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.9.1-next.0 - /usr/bin/npm
  Browsers:
    Chrome: 75.0.3770.80
    Firefox: 67.0
  npmPackages:
    @vue/cli-overlay:  3.8.0 
    @vue/cli-service: ^3.8.0 => 3.8.0 
    @vue/cli-shared-utils:  3.8.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    vue: ^2.6.10 => 2.6.10 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 3.8.2

Steps to reproduce

What is expected?

CSS is minified in production mode

What is actually happening?

CSS isn't compressed


I've created an vue.config.js with custom CSS filename configuration - "css/[name].css?[hash:8]" (see https://github.com/Vadiok/VueCliCssMinificationBug/blob/master/vue.config.js ). Minification doesn't applies when I'm using query string as a filename.

LinusBorg commented 5 years ago

File names don't have a concept of "query strings", so this is just a strange-looking filee extension. it's not a .css file anymore, it's a .css?ah336ewhaba file - and CSS minifiers only compress .css files.

What exactly are you doing this for?

Vadiok commented 5 years ago

This is for keeping one file on server, but still prevent caching updates by working with Revision Manifest Plugin. I don't like to keep many old css files or clear folder on prod before updating. The problem is in optimize-cssnano-plugin: https://github.com/intervolga/optimize-cssnano-plugin/blob/master/index.js#L32

Vadiok commented 5 years ago

I've made a pull request to ntervolga/optimize-cssnano-plugin with fix. Waiting for their answer.