uniapp 打包微信小程序时如何分离vender.js

在使用uniapp打包微信小程序时，发现生成的vender.js文件体积过大，导致小程序加载变慢。请问有什么方法可以分离或优化vender.js，比如按需引入、代码分割，或者配置webpack让它拆分成多个文件？希望了解具体的操作步骤和配置方法。

2 回复

在uni-app中，可以通过配置optimization.splitChunks来分离vendor.js。在vue.config.js中设置：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}

这样打包时会自动分离第三方依赖到单独的vendor文件。


在 UniApp 打包微信小程序时，可以通过以下方法分离 vendor.js，以减少主包体积并优化加载性能：

1. 配置 optimization.splitChunks

在 vue.config.js 中配置代码分割，将第三方依赖提取到单独的 vendor.js：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendor: {
            name: 'vendor',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
};

2. 检查分包配置

在 pages.json 中设置分包，确保 vendor.js 不会被主包包含：

{
  "subPackages": [
    {
      "root": "subpackage",
      "pages": [...]
    }
  ]
}

3. 验证构建结果

  • 运行 npm run build:mp-weixin 后，检查 dist/dev/mp-weixin 目录。
  • 确认生成 vendor.js 文件，且主包体积减小。

注意事项：

  • 微信小程序主包限制为 2MB，分离后需确保主包不超限。
  • 测试分包加载逻辑，避免资源加载错误。

通过以上步骤，可有效分离第三方库，提升小程序性能。

回到顶部