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

谢谢观看,欢迎交流

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180612G00BH600?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券