uni-app 打包后 runtime.js 大小存在可优化空间

uni-app 打包后 runtime.js 大小存在可优化空间

操作步骤：

  • 随便写一个组件，然后在页面vue里面引入就可以复现，打包后可以看到runtime.js里面存在该组件的路径

预期结果：

  • 修正mini-css-extract-plugin 在微信里面的多余代码

实际结果：

  • runtime.js占用空间变小

bug描述：

  • 微信限制了主包大小，所以每一kb都很重要，runtime.js存在大量的组件路径，然而这个路径又没有使用到（公司的小程序因为无效的路径多了70多kb）。 因为uni使用了mini-css-extract-plugin，而这个插件对mainTemplate有钩子，当有异步css时会往runtime里面写路径。所以项目里组件越多，runtime就越大。
  • 目前想到的解决办法有2个
    • uni对于小程序在导入组件的时候不改写为异步导入，没想明白微信是通过一个一个包来加载的，为什么uni要用异步导入组件，这个方法就要通过uni来修正
    • 自己写一个插件在mainTemplate的钩子里注册一个Interception，目前正常使用，没有发现问题

更多关于uni-app 打包后 runtime.js 大小存在可优化空间的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 打包后 runtime.js 大小存在可优化空间的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个非常专业的优化问题，确实触及了uni-app打包机制在小程序平台上的一个痛点。

核心问题分析： 您描述的现象完全正确。在uni-app默认配置下，Vue单文件组件（SFC）中的<style>块会被mini-css-extract-plugin处理。该插件为了支持CSS的异步加载，会在webpack的runtime.js中注入相关组件的模块ID（路径）信息。对于小程序而言，样式是内联或提取到独立wxss文件的，这种为异步CSS准备的运行时逻辑完全是冗余的，却实实在在地增大了主包体积。

对您提出的两种解决方案的评价：

  1. 修改uni-app源码，避免组件异步导入：这是最根本的解决方案。理论上，uni-app可以针对小程序平台，配置vue-loader不将样式块视为异步依赖，或者直接为小程序平台使用一个不注入这些路径的mini-css-extract-plugin定制版本。这需要从框架层面进行修改。

  2. 编写自定义webpack插件进行拦截：您目前采用的这种方法是一种非常巧妙且有效的临时解决方案。通过在mainTemplate的钩子（如requireEnsure或runtimeRequirementInTree）中拦截并过滤掉与CSS模块相关的路径注入，可以直接从源头阻止这些无用信息进入runtime.js。这种方法能直接解决问题，但依赖于uni-app内部使用的webpack版本和模板钩子的稳定性。

一个更直接、官方的优化建议： 除了您提到的两种方法，还可以尝试在项目的vue.config.js（或HBuilderX项目的configureWebpack配置中）进行如下配置，这通常能显著减少runtime.js的体积：

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      runtimeChunk: false, // 关闭runtimeChunk，将运行时代码内联到各文件中
      // 或者使用以下配置最小化runtime
      runtimeChunk: {
        name: 'runtime'
      },
      splitChunks: {
        chunks: 'all',
        minSize: 20000,
        maxSize: 0,
        minChunks: 1,
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial'
          },
          commons: {
            name: 'chunk-commons',
            test: /[\\/]src[\\/]/,
            minChunks: 2,
            priority: 5,
            reuseExistingChunk: true
          }
        }
      }
    }
  }
}
回到顶部