Strategies to reduce package size

Strategies for Reducing Package Size

In uni-app development, an excessively large package size can affect app download speed and runtime performance. Proper optimization of package size can enhance user experience and reduce server bandwidth costs. Below are specific optimization solutions analyzed from multiple dimensions.

Code-Level Optimization

On-Demand Import of Third-Party Libraries

Avoid importing large libraries in their entirety; prioritize component libraries that support on-demand loading. For example, use lodash-es instead of lodash:

// Not recommended
import _ from 'lodash'

// Recommended
import debounce from 'lodash-es/debounce'

For UI libraries, mainstream options like Vant support on-demand imports:

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

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

Code Splitting and Lazy Loading

Implement route-level lazy loading using uni-app's dynamic imports:

// pages.json
{
  "pages": [
    {
      "path": "pages/home/index",
      "style": {
        "navigationBarTitleText": "Home"
      }
    },
    {
      "path": "pages/detail/index",
      "style": {
        "navigationBarTitleText": "Details",
        "lazyLoading": true  // Enable lazy loading
      }
    }
  ]
}

Component-level lazy loading is achieved via defineAsyncComponent:

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

Removing Unused Code

1. Use unplugin-auto-import to manage API imports automatically.
2. Configure ESLint's unused-imports rule.
3. Regularly run npx depcheck to analyze dependencies.

Static Resource Optimization

Image Compression Strategies

Recommended solutions:

1. Automated tools: imagemin integrated into the build process:

npm install imagemin imagemin-pngquant --save-dev

2. Configure the Vite plugin:

import viteImagemin from 'vite-plugin-imagemin'

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

Font File Handling

1. Use font-spider to extract only the characters actually used on the page.
2. Prioritize the woff2 format:

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

CDN Acceleration for Resources

Modify manifest.json to configure external resources:

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

Build Configuration Optimization

Subpackage Strategy Configuration

Configure subpackages in manifest.json:

{
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    },
    {
      "root": "packageB",
      "pages": [
        "pages/apple",
        "pages/banana"
      ],
      "independent": true  // Independent subpackage
    }
  ]
}

Tree Shaking Configuration

Ensure Vite is configured for tree shaking:

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

Environment-Specific Builds

Control code branches via environment variables:

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

Runtime Optimization

Component Reuse Strategy

1. Create a global directory for shared components.
2. Use easycom for automatic imports:

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

Data Preloading Control

Use uni.preloadPage judiciously:

// Preload the next page
uni.preloadPage({
  url: '/pages/next/page'
})

Cache Strategy Optimization

Configure cache strategies in manifest.json:

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

Advanced Optimization Techniques

WASM Module Usage

Offload complex computations to WASM:

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

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

Binary File Handling

Use binary formats for large data files:

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

Conditional Compilation Optimization

Leverage uni-app's conditional compilation:

// #ifdef H5
console.log('Execute only on H5 platform')
// #endif

Continuous Monitoring Mechanism

Build Analysis Tools

Integrate rollup-plugin-visualizer:

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

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

Automated Alert Setup

Add size checks to the CI pipeline:

# .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

Version Comparison Analysis

Generate comparison reports with webpack-bundle-analyzer:

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

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