Entire env object gets bundled into the final build, every time you access an undefined property.

dobromir-hristov commented 2 years ago

Version

4.5.15

Reproduction link

Environment info


Environment Info:

  System:
    OS: macOS 12.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.17.4 - ~/.nvm/versions/node/v14.17.4/bin/node
    Yarn: Not Found
    npm: 6.14.14 - ~/.nvm/versions/node/v14.17.4/bin/npm
  Browsers:
    Chrome: 96.0.4664.55
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.15 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.15 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-router:  4.5.15 
    @vue/cli-plugin-vuex:  4.5.15 
    @vue/cli-service: ~4.5.0 => 4.5.15 
    @vue/cli-shared-utils:  4.5.15 
    @vue/component-compiler-utils:  3.3.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    vue: ^2.6.11 => 2.6.14 
    vue-eslint-parser:  7.11.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.8 (16.8.3)
    vue-style-loader:  4.1.3 
    vue-template-compiler: ^2.6.11 => 2.6.14 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.5.15

Steps to reproduce

run the build command. Observe the dist/app.js file and search for isFoo.

What is expected?

Accessing undefined properties in the env object to be replaced with undefined, so the minify plugin can clean up and delete code blocks.

What is actually happening?

The entire env object gets injected, everywhere you use the process.env object.

  const IS_FOO = process.env.isFoo;
    const { isFoo } = process.env;
    if ('isFoo' in process.env) {
      console.log('THEREISFOO');
    }
    return {
      isFoo: IS_FOO === isFoo,
    };

gets roughly transformed to

data: function () {
          var e = Object({ NODE_ENV: 'production', BASE_URL: '/' }).isFoo,
            t = Object({ NODE_ENV: 'production', BASE_URL: '/' }).isFoo;
          return 'isFoo' in Object({
            NODE_ENV: 'production',
            BASE_URL: '/',
          }) && console.log('THEREISFOO'), { isFoo: e === t };
        },

I realise this is probably not Vue/CLI fault and is strictly a webpack thing, but I thought I may be doing something wrong. I looked all over and I could not find a similar issue.

qngl commented 2 years ago

I met the same issue, and it is only found in Single File Component. If I use const IS_FOO = process.env.isFoo; in js file, the value is replaced with string value during build time. If I use const IS_FOO = process.env.isFoo; in *.vue file, the entire process.env object gets bundled.

qngl commented 2 years ago

With @vue/cli-service@4.5.15, there is no problem with usage like const IS_FOO = process.env.isFoo;. The variable will be replaced with the text string at build time. So I think a best practice is never using the entire process.env object in the code. I don't think anyone want embed the entire process.env into the code.

vuejs / vue-cli