Magento2 进阶版 JS 打包（性能至少提升50%）
Magento2 进阶版 JS 打包（性能至少提升50%）
PS：如需转载，请留言，转载后请说明出处，否则虽繁必究！！！
简介
为提高性能，打包 Javascript 模块是减少了两个数量：
- 服务器请求的数量
- 这些服务器请求的大小
在模块化应用中，服务器的请求数量可以达到上百个。比如，下面这张截图是加载纯净版 Magento 的首页的 Javascript 请求列表，这仅仅是开始的一部分。
Magento 合并和打包
原装的 Magento 为减少服务器请求数量提供了两种方式：合并和打包。这两个设置默认是关闭的。你可以在 Magento 后台打开 Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings，或者用命令行。
基础的打包
用命令行启用 Magento 的 内置的打包：
$ php -f bin/magento config:set dev/js/enable_js_bundling
这个是 Magento 原生的机制，合并现有的所有的资源然后分成差不多大小的文件（bundle_0.js, bundle_1.js ... bundle_x.js）：
有所改善了，但是浏览器仍然加载所有的 JavaScript 文件，而不是只加载所需的。
Magento 打包减少了每个页面的连接数量，但是每个页面请求加载了所有的打包文件，甚至有时可能页面只是需要其中的一两个打包文件。在浏览器缓存了打包文件后，性能提高了，但是因为浏览器同时加载这些打包文件，导致用户第一次访问 Magento 店铺的时候可能会花一些时间提渲染，也会影响用户体验。
基础的合并
通过命令行来启用 Magento 内置的合并：
$ php -f bin/magento config:set dev/js/merge_files 1
这个命令合并了所有同步的 Javascript 文件到一个文件中。启用合并不启用打包是不管用的，因为 Magento 使用 RequireJS 。如果你不启用打包，Magento 只合并 RequireJS 和它的配置。当你即启用打包又启用合并时，Magento 生成单个 Javascript 文件：
真实渲染时间
之前打包和合并的加载时间在开发环境下开起来还不错。但是，在真实情况下，很多东西减慢了渲染：连接慢、连接阈值大、网络限制。另外，移动设备渲染速度不如台式机。
在实际情况下，为了测试和准备店铺的部署，推荐你用 Chrome 的本机限制配置——“慢 3G ” 进行测试。在“慢 3G” 的条件下，我们之前的打包后的输出时间反应了很多用户连接的事实。
在慢 3G 连接下，加载纯净 Magneto 的首页所需的所有打包的文件花费了 44s 。
当把打包后的文件合并的一个文件中去后也一样。正如下面所示，用户可能仍然等待大约 42s 来加载初始页面：
我们可以用更高级的打包方法来改善这些加载时间。
进阶版打包
记住，JavaScript 打包的目的是减少浏览器中每个页面的请求资源的数量和大小。为了达到这个目的，我们想打包文件以便于店铺的每个页面只需要加载一个共同的打包文件和每个页面特定的打包文件。
达到这一目的的一种方法是通过页面类型来定义你的打包文件。你可以把 Magento 的页面分类成几个页面类型，包括分类、产品、CMS、用户、购物车、结账。每个页面类型有不同的 RequireJS 模块依赖的集合。当你按照页面类型来打包你的 RequireJS 模块时，你最终会得到涵盖了你店铺所有页面类型的依赖的少数的几个打包文件。
比如，你可能最后得到所有页面共同的依赖的一个包，只用在 CMS 页面的包，只用在产品页面的包，以及搜索页面的一个包和下单页面的一个包。
你可以根据以下目的来创建包：共同的功能，相关产品的功能，配送功能，下单功能，税务和表单验证功能。决定如何打包这取决于你和你的 Magento 店铺的结构。也许你会发现一些更好的打包策略。
安装一个纯净的 Magento 可以通过页面类型进行打包就可以有很好的性能，但是一些定制可能需要更深入的分析和其他资源的分配。
需要的工具
接下来的步骤中你需要安装并且熟悉下面的工具：
示例代码
Magento2专业中文社区 - 支付
本帖含有隐藏内容，请您登录后向作者支付 20 积分 后再查看结果是相当明显的：
现在，加载时间比 Magento 内置的打包快三倍。
PS：如需转载，请留言，转载后请说明出处，否则虽繁必究！！！
RickAndIsaac 已回答
