Webpack体积篇优化记录——后续

令人意想不到的结果产生，以下是报错截图。

这个原因是应为没有引入 bundle.js 文件。

重新配置文件：

题外：使用 externals 方法时，⚠️注意在 react-rom 至 16.0.0 版本后，为兼容 es6 ，产生了多个 rc 和 beta 版本，同时编译生成cjs 、umd两个打包文件。

cjs 、umd 该选哪个？cjs、umd 的区别在于？

其实这些都是 JS 模块规范区别！！！

CommonJS（cjs）

同步, 主要为了用于服务端node.js使用

module定义模块,module.export导出模块内容,require引入模块

AMD

异步, 用法为define(['dep1','dep2'],function(dep1,dep2){...});, 代表库 RequireJS

运行时先检查依赖库, 根据配置文件获取实际路径, 在dom中动态插入script脚本, 加载完毕后触发onLoad事件通知加载完成, 所有依赖都加载完毕后执行回调, 并将依赖作为参数传递进去

CMD

异步, 用法为define(function(require,exports,module){...});, 代表库 SeaJS

将回调函数转为字符串, 使用正则提取require语法获取依赖, 根据配置文件获取实际路径, 在dom中动态插入script脚本, 加载完毕后触发onLoad事件通知加载完成, 所有依赖都加载完毕后执行回调, 并将回调中的require语句替换为依赖

比如回调中存在var $ = require('jquery'), 则回调执行时 $ 即为jquery实例

UMD

umd是AMD和CommonJS的糅合, 是跨平台的解决方案. UMD先判断是否支持Node.js的模块exports是否存在, 存在则使用Node.js模块模式. 在判断是否支持AMD(define是否存在), 存在则使用AMD方式加载模块

ES6 Module

来自 ECMAScript 2016, 浏览器暂时未支持, 需要转成 ES5 运行

参考：JS模块规范（CommonJS,AMD,CMD,UMD,ES6）

总结：最后还是决定统一使用DLl方法

优：

1、代码通俗易懂

2、不会因资源均走缓存，而产生未知错误

3、不需要考虑版本选择问题

劣：

参考链接：

1、教你如何玩转webpack.DllPlugin

End

谢谢观看，欢迎交流