第4章 webpack优化

webpack是一个打包工具，目的是进行前端构建的，也就是前端工程化，就有一个很重要的指标：项目上线运行的速度，打包耗费的时间；所以webpack的优化知识就凸显的很重要。

面试时，面试官会问：对webpack的理解？mode有几种？区别是什么？

一般开发工作中仅是使用webpack进行项目构建和打包，回答往往是分为生产和开发模式，开发模式不会进行代码压缩生产模式会压缩代码，大部分人都会这样的回答，但是吸引面试官是知道除了代码压缩还做了其他什么事情，这才算了解production。

production模式打包自带优化

• tree shaking

  tree shaking 是一个术语，通常用于打包时移除 JavaScript 中的未引用的代码(dead-code)，它依赖于 ES6 模块系统中 import和 export的静态结构特性。

  开发时引入一个模块后，如果只使用其中一个功能，上线打包时只会把用到的功能打包进bundle，其他没用到的功能都不会打包进来，可以实现最基础的优化

注意：
用require是不支持tree shaking的
正确的导入：import {add} from math.js
 `import`和 `export`的**静态结构**特性，就是要写在顶级作用域
 require是动态导入，是可以写在局部作用域中，可以通过if判断导入

• scope hoisting（作用域提升）

  scope hoisting的作用是将模块之间的关系进行结果推测， 可以让 Webpack 打包出来的代码文件更小、运行的更快

  scope hoisting 的实现原理其实很简单：分析出模块之间的依赖关系，尽可能的把打散的模块合并到一个函数中去，代码更小，加载更快，但前提是不能造成代码冗余。
  
  因此只有那些被引用了一次的模块才能被合并。

  由于 scope hoisting 需要分析出模块之间的依赖关系，因此源码必须采用 ES6 模块化语句，不能使用require,不然它将无法生效。
  原因和tree shaking一样。

  类似于“预执行”

• 代码压缩

  所有代码使用UglifyJsPlugin插件进行压缩、混淆