生产化境下的优化 optimization

<1> 两种环境

两种环境：开发环境和生产环境

开发环境 注重开发效率

生产环境 注重运行效率

不同环境配置下的 webpack 配置： ---- 两种方式

• 配置文件根据环境不同导出不同配置

• 一个环境对应一个配置文件

  - 可以配置一个公共文件，里面配置两个环境下的公共配置
  - 在不同环境中的配置文件中进行引用合并！！！
  
  注意：
     - 合并时使用 `webpack-merge` 提供的 merge 方法，
     - 因为简单的 Object.assign() 只会替代对象中的同名属性，所以对于 plugins 的配置，会直接替代，而不是追加！！
  

<2> 生产环境下的优化

(1) DefinePlugin 【webpack中的内置插件】

功能是为代码注入全局常量成员！！使用方法就是在 new 的时候，传入要注入的全局常量组成的对象进行配置！！

然后就可以直接使用了！！！

(2) Tree Shaking

功能是摇掉代码中未被引用的部分！！

what is 未引用代码？

如上： Button 模块中的 console.log 代码，它在 return 之后，就不会被执行！！！就是未引用代码！！打包的时候完全可以把它去掉，减小代码体积！！

注意：

Tree Shaking不是指某个配置选项，它是一组功能搭配使用后的优化效果！！且在production模式下是默认开启的！！

手动开启一下：

总的来说需要配置两个插件：usedExports、minimize

• usedExports负责标记没被引用的代码，没被引用的代码就不会在打包后的文件中被导出！！
• minimize负责把那些被引用的代码给删除掉！！！

(3) concatenateModules

功能是尽可能把所有模块合并输出到一个函数中，既提升了运行效率，又减少了代码体积！！！

(4) sideEffects 副作用

副作用 指的是模块执行时，除了导出成员之外所做的事情！！

• 如果某个模块没有副作用且没有被其他模块导入，就不会被打包。
• 如果是副作用代码。被导入后没有具体引用，且你还标识它不是副作用代码，还是会被删除！！