webpack基础——代码分离

代码分离是什么

代码分离是一种技术，使得主文件被拆分为多个文件，同时保证分离后的代码对原有的功能没有影响。webpack也具备代码分离的能力。由于webpack的打包过程是自动化的，因此自然的通过webpack做代码分离后的文件之间的关系要么是自动关联的要么能很清晰看到分离文件之间的联系。
webpack中代码分离的方案分为三类：

1. 多入口
   webpack从一个入口出发对应一个输出的bundle.js，那么多个入口就将会有多个输出的bundle.js，虽然这些bundle.js之间不存在自动的关联关系，但是，在HTML文件中分别引入他们就能实现了引用关联。甚至可以使用HtmlWebpackPlugin插件，自动化生成引用由webpack打包生成的JavaScript文件的HTML文件。

2. CommonsChunkPlugin
   该插件可以用来分离引用的第三方库，将第三方库独立成为一个JavaScript文件，之后的操作如同多入口产生的多个bundle.js一样，或者在HTML文件中引用，或者由HtmlWebpackPlugin插件来生成这个包含引用的HTML文件。
   
   上图的代码截图于https://github.com/webpack/webpack/releases 的v3.10.0版本中的/examples/multiple-entry-points/webpack.config.js。结合了多入口和CommonsChunkPlugin的使用，可以作为示例参考。
3. 动态导入
   上面两种方案有很大的局限性，首先要求代码可以分为多个入口否则多入口的方案没有意义，其次，使用CommonsChunkPlugin可以提取第三方库，但是却没有说明业务代码怎么做代码分离，因此，第三种方案动态导入要来解决业务代码中的代码分离问题。
   webpack支持多种动态导入写法：
   • require.ensure()
     
     
   • import()
     
   • ES6(async、await)
     
     一旦使用了动态导入语法，webpack在打包的时候就会自动分离bundle.js，进而生成与bundle.js有自动关联关系的其他小的JavaScript文件。

     动态导入和懒加载

     使用代码分离技术运行小demo之后，会发现代码确实是分离了，但是加载网页的时候所有资源是一口气按顺序全都下载。代码分离技术本身并没有起到任何的优化作用，反而由于更多的http请求，又恰好在不支持HTTP2.0的HTTP服务器上运行时，可能还会降低加载的性能。
     设想一下，如果分离的文件能在真正需要的时候才加载，这样就能提高加载渲染性能。因此，懒加载（按需加载）的思想就是在用户进行交互的时候，加载其所需的资源。懒加载的思想结合代码分离的方案，这就启发了应该在用户交互的代码中加入动态导入的写法。

     按需加载到底是优化还是基础

     根据上一节最后给出的启发方案：在用户交互的代码里加入动态导入的写法，使得用户交互时才引入所需的模块。看到这里，内心很难平静。按需加载从效果上看，提高了加载性能，这自然算是优化。然而从实现的角度上看，除非有合适的定制化的插件或者自身水平极高能够改写webpack对模块的操纵行为，否则必然需要修改业务代码。从代码成分的角度看，这种写法是代码***。总的说来，如果把按需加载看成是项目实现的基础，那在实现功能的时候就要顺带实现。否则，优化之路必然很漫长，但即使再漫长，抓住本质思想就并不复杂。

     方案

   • 采用框架，使得ui组件可以按需加载
     react：https://reacttraining.com/react-router/web/guides/code-splitting
     vue：https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/
   • 动态路由
     选型路由组件的时候，优先查看是否有根据路由对资源懒加载的能力
     https://react-guide.github.io/react-router-cn/docs/guides/advanced/DynamicRouting.html
   • 统一资源暴露
     书写一个或者多个模块来统一管理资源，主要功能是使用动态导入的写法导出其他的模块的内容，平时在业务代码中用统一资源暴露的模块去获取真正有用的对象。伪代码如下: