Changing .browserslistrc file content doesn't invalidate cache

[steveworkman]

Version

3.5.1

Reproduction link

https://github.com/steveworkman/browserslisttest

Environment info

Environment Info:

  System:
    OS: macOS 10.14.3
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.7.0 - ~/.nvm/versions/node/v10.15.1/bin/npm
  Browsers:
    Chrome: 72.0.3626.121
    Firefox: Not Found
    Safari: 12.0.3
  npmPackages:
    @ascendancyy/vue-cli-plugin-stylelint: ^1.1.2 => 1.1.2
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.5.1
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.5.1
    @vue/cli-plugin-babel: ^3.5.0 => 3.5.1
    @vue/cli-plugin-eslint: ^3.5.0 => 3.5.1
    @vue/cli-plugin-unit-jest: ^3.5.0 => 3.5.1
    @vue/cli-service: ^3.5.0 => 3.5.1
    @vue/cli-shared-utils:  3.5.1
    @vue/component-compiler-utils:  2.6.0
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.2
    jest-serializer-vue:  2.0.2
    vue: ^2.6.6 => 2.6.8
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.3
    vue-jest:  3.0.4
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.8
    vue-template-es2015-compiler:  1.9.1
    vuex: ^3.0.1 => 3.1.0
  npmGlobalPackages:
    @vue/cli: 3.5.1

Steps to reproduce

• Create a new vue cli project vue create project
• From the options, select Babel, and select to put configuration into its own files
• Enter the project and run npm run build
  • Remember the size of the file output
• Change the value of the .browserslistrc file to Chrome > 70 (should have almost no polyfills)
• Run npm run build again

What is expected?

The bundle sizes should change when the browserslist has been changed to reflect the additional polyfills being brought in.

What is actually happening?

Nothing. The .browserslistrc file has no effect on the output size of the files

---

It appears that the preset-env plugin only takes a browserslist into account if it is present in the package.json. If the same steps are taken in the package.json file then the chunk-vendors file goes from 82KB to 65KB.

This was noted in #1236 when browserslist file generation was added, though it appears that the underlying issue was not resolved.

The offending code appears to be in https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/babel-preset-app/index.js#L90 where the targets come from the options of the plugin in this scenario, which the readme says comes from package.json https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app#targets

[LinusBorg]

It rather seems that this file is not included when generating the cache key for the cache-loader for js files.

You can verify by deleting /node_modules/.cache between builds, I can't right now

I think I already found the culprit and will submit a PR.

There's an else missing here

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/PluginAPI.js#L162

introduced in a2bc927 as sideeffect of a fix for something else.