浅析webpack tree-shaking

• 首先区分一下 es modules 和 common.js
• es modules 用于浏览器环境的js模块化，export default 、export 来导出 。编译时引入。
• common.js 用于node.js 平台，module exports 、 exports 来导出。运行时导入。
• es modules 可以静态解析 哪个模块引入但没有调用 ， 最后打包bundle.js 就不会打包那些没引入的模块。另外，tree-shaking 除了可以shake掉没有用到的模块，还可以摇掉没有用到的函数和变量。是script标签内声明的函数和变量，而不是methods里的或者data里的函数和变量，因为对于一个Vue的实例对象，methods和data都是属于一个对象的属性，属性是可以动态调用的，而script标签内Vue实例外部的函数和变量是不能动态调用。所谓动态调用就是，作为对象的属性，你是可以通过用户点击来切换是否引入这些属性，所以dev-server的watcher是不能判断其是否被调用，只能判断其对象。而外部的函数和变量，通过编译解析成AST后，ast tree 上的token 是变量形式的，变量是可以被遍历检索其是否被某个地方调用的，如果没有被用到那它就会是 no use 状态，因此tree-shaking会将其抹除。而tree-shaking的解析过程，就是一开始通过将一个类似entry.js的入口文件转化ast后，就检索ast上的token的状态，是否属于no use，而具体去实现的就是 uglify.js 去具体执行的。
• 关于 HMR，为什么HMR能够如此迅速的去替换更改有变动的文件呢？除了是基于content hash来判断哪个文件是改动过的，浏览器相当于是一个client ，webpack端是一个server端，通过websocket来彼此进行通信。并且每次编译会将所有文件打包成一个bundle.js,而每个bundle.js 其实都是由多个模块的路径及打包内容组装的，这就为迅速编译提供了可能性，因为每个模块都有独特的路径，那么我只需知道哪个模块是做了修改的，只对该部分进行替换即可。所以HMR之所以能够快速的实现热替换，是因为webpack作为server端会先检索哪些文件是变动的，然后对这些文件单独进行编译打包成小的bundle，然后通过websocket与浏览器client端建立的通信通道，告诉其需求请求哪些小的文件，然后webpack会对这些文件打包成一个个的小bundle并返还给浏览器，再组装成大的bundle.js ，从而实现迅速的替换。