如何解决uni-app编译后 vendor.js 文件过大

解决uni-app编译后vendor.js文件过大的完整攻略如下。

问题分析

首先需要了解的是，uni-app在编译后会生成一个vendor.js文件，包含了所有npm包和uni-app框架代码。由于vendor.js包含了大量代码，导致文件过大，从而使得应用程序的启动速度变慢，影响用户体验。

解决方案

1. 使用import或require来按需加载npm包

首先，可以使用import或require来按需加载npm包，而不是在每个页面中都引入所有的npm包。这样做可以减少生成的vendor.js文件的大小，加快应用程序的启动速度。

例如，在需要使用某个npm包的页面中，可以使用以下代码来加载该npm包：

import moment from 'moment'

或者使用require：

const moment = require('moment')

2. 使用webpack-bundle-analyzer来分析vendor.js文件的组成情况

其次，可以使用webpack-bundle-analyzer来分析vendor.js文件的组成情况。该工具可以分析vendor.js文件中每个模块占用的空间，并且以可视化的方式呈现出来，帮助开发者找出造成vendor.js文件过大的原因。

使用webpack-bundle-analyzer非常简单，只需要在项目中安装它，然后在webpack配置文件中引入即可。以下是基本的使用示例：

1. 安装webpack-bundle-analyzer：

npm install --save-dev webpack-bundle-analyzer

1. 修改webpack配置文件，添加以下代码：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  // ...
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new BundleAnalyzerPlugin()
        ]
      }
    }
  }
}

代码中的配置项configureWebpack是vue-cli项目中用于配置webpack的选项，它允许我们修改webpack配置。在该配置项中，我们可以根据不同的环境配置不同的插件，此处我们只在生产环境下使用webpack-bundle-analyzer。

1. 运行项目并启动webpack-bundle-analyzer：

npm run serve -- --mode production --report

运行该命令会启动一个本地服务器，然后自动打开浏览器并展示webpack-bundle-analyzer工具中的分析报告。

除了以上两种解决方案外，还可以使用其他方式来减少vendor.js文件的大小，例如：使用cdn、删除不必要的依赖等。总之，我们需要根据具体情况，选择最合适的解决方案。