减少包体积的策略

减少包体积的策略

uni-app开发中，包体积过大会影响应用下载速度和运行性能。合理优化包体积能提升用户体验，降低服务器带宽成本。下面从多个维度分析具体优化方案。

代码层面的优化

按需引入第三方库

避免全量引入大型库，优先选择支持按需加载的组件库。例如使用lodash-es替代lodash：

// 不推荐
import _ from 'lodash'

// 推荐
import debounce from 'lodash-es/debounce'

对于UI库，Vant等主流库都支持按需引入：

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    Components({
      resolvers: [VantResolver()],
    }),
  ],
}

代码分割与懒加载

利用uni-app的动态导入实现路由级懒加载：

// pages.json
{
  "pages": [
    {
      "path": "pages/home/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/detail/index",
      "style": {
        "navigationBarTitleText": "详情",
        "lazyLoading": true  // 启用懒加载
      }
    }
  ]
}

组件级懒加载通过defineAsyncComponent实现：

const AsyncComponent = defineAsyncComponent(() => 
  import('@/components/HeavyComponent.vue')
)

移除无用代码

1. 使用unplugin-auto-import自动管理API导入
2. 配置ESLint的unused-imports规则
3. 定期执行npx depcheck分析依赖关系

静态资源优化

图片压缩策略

推荐使用以下方案：

1. 自动化工具：imagemin配合构建流程

npm install imagemin imagemin-pngquant --save-dev

2. 配置vite插件：

import viteImagemin from 'vite-plugin-imagemin'

export default {
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 7 },
      pngquant: { quality: [0.8, 0.9] },
    })
  ]
}

字体文件处理

1. 使用font-spider提取页面实际用到的字符
2. 优先使用woff2格式：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
}

资源CDN加速

修改manifest.json配置外部资源：

{
  "networkTimeout": {
    "request": 30000,
    "downloadFile": 30000
  },
  "cdn": {
    "js": [
      "https://cdn.example.com/vue/3.2.47/vue.runtime.global.prod.js"
    ]
  }
}

构建配置优化

分包策略配置

在manifest.json中设置分包：

{
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    },
    {
      "root": "packageB",
      "pages": [
        "pages/apple",
        "pages/banana"
      ],
      "independent": true  // 独立分包
    }
  ]
}

Tree Shaking配置

确保vite配置启用摇树优化：

export default {
  build: {
    terserOptions: {
      compress: {
        unused: true,
        dead_code: true,
        drop_console: true
      }
    }
  }
}

环境区分打包

通过环境变量控制代码分支：

// vite.config.js
export default ({ mode }) => {
  return {
    define: {
      __DEV__: mode === 'development'
    }
  }
}

运行时优化

组件复用策略

1. 创建全局公共组件目录
2. 使用easycom自动导入：

// pages.json
{
  "easycom": {
    "^u-(.*)": "@/components/u-$1/u-$1.vue"
  }
}

数据预加载控制

合理使用uni.preloadPage：

// 预加载下一页
uni.preloadPage({
  url: '/pages/next/page'
})

缓存策略优化

配置manifest.json的缓存策略：

{
  "app-plus": {
    "optimization": {
      "subpackages": true,
      "preload": {
        "network": "all",
        "packages": ["_www"]
      }
    }
  }
}

高级优化技巧

WASM模块的使用

将复杂计算逻辑移至WASM：

import init from './pkg/optimized.wasm'

init().then(wasm => {
  wasm.heavy_computation()
})

二进制文件处理

对大型数据文件使用二进制格式：

const buffer = await uni.getFileSystemManager().readFile({
  filePath: 'binary.data',
  encoding: 'binary'
})

条件编译优化

利用uni-app的条件编译：

// #ifdef H5
console.log('仅在H5平台执行')
// #endif

持续监控机制

构建分析工具

集成rollup-plugin-visualizer：

import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [
    visualizer({
      open: true,
      gzipSize: true
    })
  ]
}

自动化报警设置

在CI流程中添加体积检查：

# .github/workflows/build.yml
- name: Check bundle size
  run: |
    SIZE=$(stat -f%z dist/build/app.js)
    if [ $SIZE -gt 1024000 ]; then
      echo "Bundle size exceeds 1MB!"
      exit 1
    fi

版本对比分析

使用webpack-bundle-analyzer生成对比报告：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      compare: true,
      baseline: true
    })
  ]
}