得物技术浅谈JS资源分包

背景

在版本更新迭代、新代码上线后，若是用户须要从新从服务器加载所有资源（js、css），确定会让页面打开变慢，这实际上是没有必要的。

为了优化用户体验，提升页面打开速度，能够将js拆分红多个模块，每次有更新，用户只须要加载更新了的业务代码便可，这就是分包。

方案

通常来讲，前端项目无论框架是什么，大可能是基于webpack打包的，好比umi、next、nuxt、vue-cli，因此本文只基于webpack打包工具给出方案。

webpack4提供了 splitChunks 插件，就是用来作代码分割的，具体使用方法能够查看官方文档。

比较广泛的分包策略是按照体积大小、共用率、更新频率从新划分咱们的包，使其尽量的利用浏览器缓存。

根据这一策略给出通用的分包方案，将js拆分红如下三个模块：

1. 第三方依赖（node_modules）
2. UI库（antd、element-ui、cube-ui）
3. 业务代码

所以，每次发布代码以后一般须要更新的只有三、而1和2直接从浏览器缓存中读取便可。

实施

以phoenix项目为例，目前的线上页面打包后的状况以下图：

经过分析工具看看各个模块是什么：

• umi.js：框架js
• verdors.async.js：第三方依赖
• layouts_index.async.js和p_discountDetail_index.async.js：业务代码
• （忽略bundle.min.js，这是sentry脚本）

在什么都不作的状况下umi其实已经默认分包了，这是由于其内置的webpack提供了默认分包策略：

• 新的 chunk 是否被共享或者是来自 node_modules 的模块
• 新的 chunk 体积在压缩以前是否大于 30kb
• 按需加载 chunk 的并发请求数量小于等于 5 个
• 页面初始加载时的并发请求数量小于等于 3 个

使用上述方案对默认分包策略进行优化，将UI库提取出来，在配置文件（umirc.ts）中加入自定义分包代码：

config.optimization.splitChunks({
  chunks: 'async',
  minSize: 30000,
  maxSize: 0,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  automaticNameDelimiter: '~',
  name: true,
  cacheGroups: {
      vendors: {
        name: 'vendors',
      test: /[\\/]node_modules[\\/]/,
        priority: -10,
        },
    antdesigns: {
      name: 'antdesigns',
      test: /[\\/]node_modules[\\/]antd-mobile[\\/]/,
      priority: -9,
        }
  }
})

各个字段的表示的含义再也不此赘述，可查看官方文档。主要看cacheGroups，把antd提取了出来。

再来看下打包以后的效果：

多了一个antdesigns.js，成功将antd提取出来。

Q：其实这里能够思考一下，将antd提取到底合不合适？

A：phoenix项目是个多页面应用，目前页面数量很少，而antd也支持按需引入，将antd代码打包进各个页面的业务代码或者node_modules中也不会增长多少体积，而antd代码体积并不大，单独提取出来后须要多一次http连接，感受没有必要。不过随着之后项目体积变大，也就不必定了。因此各个项目仍是要根据自身状况进行分包。

结论

分包是一个博弈的过程，是让 a bundle 大一点仍是 b?

是让首次加载快一点仍是让 cache 的利用率高一点？

但有一点要切记，拆包的时候不要过度的追求颗粒化，什么都单独的打成一个 bundle，否则你一个页面可能须要加载十几个js文件，若是你还不是HTTP/2的状况下，请求的阻塞仍是很明显的(受限于浏览器并发请求数)。

因此仍是那句话资源的加载策略并没什么彻底的方案，都须要根据项目自身状况进行分包。

后续要作的

分包以后的下一步就是充分使用浏览器缓存，首先须要把静态资源放到cdn上，再设置合理的缓存策略，只要chunk的hash没有改变，都从浏览器缓存读取。

参考资料：https://panjiachen.github.io/...

文/小辰

关注得物技术，携手走向技术的云端