process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息

  • NODE_ENV 就是其中的一个环境变量。这个变量主要用于标识当前的环境（生产环境，开发环境
  • 默认是没有这个环境变量的，需要自己手动配置,不同系统有不同的环境变量配置方式
    1. {
    2. TERM_PROGRAM: 'Apple_Terminal',
    3. NODE: '/usr/local/bin/node',
    4. INIT_CWD: '/Users/lulongwen/Sites/qiankun/dva-monitor',
    5. ANDROID_HOME: '/Users/lulongwen/Applications/flutter/app/android-sdk-macosx',
    6. TERM: 'xterm-256color',
    7. SHELL: '/bin/zsh',
    8. CLICOLOR: 'Yes',
    9. npm_config_metrics_registry: 'https: //registry.npm.taobao.org/',
    10. TMPDIR: '/var/folders/gg/2hk6cf5n491b75g43ll9dskw0000gn/T/',
    11. TERM_PROGRAM_VERSION: '440',
    12. COLOR: '1',
    13. TERM_SESSION_ID: 'CB3F0117-95D1-4777-A541-4A29E793207F',
    14. npm_config_noproxy: '',
    15. npm_config_registry: 'https: //registry.npm.taobao.org/',
    16. npm_config_home: 'https: //npm.taobao.org',
    17. USER: 'lulongwen',
    18. npm_config_globalconfig: '/usr/local/etc/npmrc',
    19. SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.NFXgsDqr64/Listeners',
    20. __CF_USER_TEXT_ENCODING: '0x1F5: 0: 0',
    21. PUB_HOSTED_URL: 'https: //pub.flutter-io.cn',
    22. npm_execpath: '/usr/local/lib/node_modules/npm/bin/npm-cli.js',
    23. BASH_SILENCE_DEPRECATION_WARNING: '1',
    24. LSCOLORS: 'CxfxcxdxbxegedabagGxGx',
    25. PATH: '/Users/lulongwen/Sites/qiankun/dva-monitor/node_modules/.bin:/Users/lulongwen/Sites/qiankun/node_modules/.bin:/Users/lulongwen/Sites/node_modules/.bin:/Users/lulongwen/node_modules/.bin:/Users/node_modules/.bin:/node_modules/.bin:/usr/local/lib/node_modules/npm/node_modules/@npmcli/run-script/lib/node-gyp-bin:/Users/lulongwen/Applications/flutter/bin:/Applications/MAMP/bin/php/php7.3.3/bin:/usr/local/mongodb/bin:~/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/local/bin:/Users/lulongwen/Applications/flutter/app/android-sdk-macosx/platform-tools:/Users/lulongwen/Applications/flutter/app/android-sdk-macosx/tools:/Users/lulongwen/Applications/flutter/app/android-sdk-macosx/build-tools/29.0.3',
    26. npm_package_json: '/Users/lulongwen/Sites/qiankun/dva-monitor/package.json',
    27. _: '/Users/lulongwen/Sites/qiankun/dva-monitor/node_modules/.bin/cross-env',
    28. npm_config_userconfig: '/Users/lulongwen/.npmrc',
    29. npm_config_init_module: '/Users/lulongwen/.npm-init.js',
    30. __CFBundleIdentifier: 'com.apple.Terminal',
    31. npm_command: 'run-script',
    32. PWD: '/Users/lulongwen/Sites/qiankun/dva-monitor',
    33. FLUTTER_STORAGE_BASE_URL: 'https: //storage.flutter-io.cn',
    34. npm_lifecycle_event: 'start',
    35. EDITOR: 'vi',
    36. npm_package_name: 'monitor',
    37. LANG: 'zh_CN.UTF-8',
    38. XPC_FLAGS: '0x0',
    39. npm_config_node_gyp: '/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js',
    40. XPC_SERVICE_NAME: '0',
    41. HOME: '/Users/lulongwen',
    42. SHLVL: '2',
    43. LS_OPTIONS: '--color=auto',
    44. npm_config_cache: '/Users/lulongwen/.npm',
    45. LOGNAME: 'lulongwen',
    46. npm_lifecycle_script: 'cross-env ESLINT=none SOCKET_SERVER=none PROJECT_ENV=INNER_LOCAL roadhog server',
    47. npm_config_user_agent: 'npm/7.9.0 node/v14.15.1 darwin x64',
    48. npm_node_execpath: '/usr/local/bin/node',
    49. npm_config_prefix: '/usr/local',
    50. ESLINT: 'none',
    51. SOCKET_SERVER: 'none',
    52. PROJECT_ENV: 'LOCAL',
    53. NODE_ENV: 'development',
    54. BABEL_DISABLE_CACHE: '1'
    55. }

vue NODE_ENV

Vue 中， NODE_ENV 可以通过 .env 文件或者 .env.[mode] 文件配置。
配置过后，运行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）时，就会将该模式下的NODE_ENV载入其中了
在命令后直接使用 —mode 参数手动指定模式。当然，每个模式配置的变量也不只有 NODE_ENV , 也可

有了模式的概念，就可以根据不同的环境配置模式，就不用每次打包时都去更改 vue.config.js 文件

  • 在 vue.config.js 文件中，将 publicPath 参数设置为：publicPath: process.env.BASE_URL
  • 设置之后，再在各个 .env.[mode] 文件下对 BASE_URL 进行配置就行

dev环境

  • 方便的debug和troubleshootin，有比较强的source mapping;
  • 能够得到颗粒度较小、且有根据变动代码针对性的的加载（live reloading/hot module replacement）;
  • 可以做一些代理Proxy相关的调试；
  • 可以方便的根据开发者的情况，对本地的dev-server进行配置等

production生产环境

  • 通过压缩Javscript/CSS代码，获取更小的文件加载体积；
  • 通过包的拆解来得到更优的加载策略，从而降低load time；
  • 比较轻量的source mapping（当然，当你需要一些trace信息做日志和报警的时候是另外一番情景）;
  • 线上的产品的一些个性诉求（比如，对同一份Javascript代码也许要匹配不同的样式文件）等

本地开发compile(w/ DLL or NO DLL)
本地开发re-compile(w/ DLL or NO DLL)
本地测试build（webpack analyse分析的重点部分
云构建时长 (NO DLL or 配置化OSS支撑DLL

webpack-merge针对不同的环境进行配置

terser 默认的内置压缩工具包

module.rules.exclude[0]

优化性能 by DLL/ Optimization

  • webpack-bundle-analyzer，借助一些工具来进行分析