feat: 初始化工程
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
# 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. **性能测试**:在不同平台测试性能
|
||||
Reference in New Issue
Block a user