mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
小莫唐尼
98 lines
1.6 KiB
Markdown
98 lines
1.6 KiB
Markdown
# Build Optimization
|
||
|
||
## 构建优化
|
||
|
||
优化 UniApp + uView 项目的构建和性能。
|
||
|
||
### 代码分割
|
||
|
||
使用条件编译减少代码体积：
|
||
|
||
```vue
|
||
<template>
|
||
<view>
|
||
<!-- #ifdef H5 -->
|
||
<u-button>H5 按钮</u-button>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<u-button>小程序按钮</u-button>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
### 组件按需引入
|
||
|
||
虽然 easycom 会自动引入，但可以优化：
|
||
|
||
```json
|
||
{
|
||
"easycom": {
|
||
"autoscan": true,
|
||
"custom": {
|
||
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 图片优化
|
||
|
||
```vue
|
||
<template>
|
||
<view>
|
||
<!-- 使用 webp 格式（H5） -->
|
||
<!-- #ifdef H5 -->
|
||
<image src="/static/image.webp"></image>
|
||
<!-- #endif -->
|
||
|
||
<!-- 使用 png 格式（小程序） -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image src="/static/image.png"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
### 样式优化
|
||
|
||
```vue
|
||
<style lang="scss" scoped>
|
||
/* 使用 scoped 避免样式污染 */
|
||
.container {
|
||
/* 样式 */
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### 打包配置
|
||
|
||
在 manifest.json 中配置打包选项：
|
||
|
||
```json
|
||
{
|
||
"mp-weixin": {
|
||
"setting": {
|
||
"minified": true,
|
||
"postcss": true
|
||
}
|
||
},
|
||
"h5": {
|
||
"optimization": {
|
||
"treeShaking": {
|
||
"enable": true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 注意事项
|
||
|
||
1. **条件编译**：使用条件编译减少代码体积
|
||
2. **图片优化**：使用合适的图片格式和大小
|
||
3. **样式优化**：使用 scoped 避免样式污染
|
||
4. **打包配置**：正确配置打包选项
|
||
5. **性能测试**：在不同平台测试性能
|