减少代码体积

更新时间：2024-10-12 10:51:00

本节非常重要，优劣不同的写法会有明显的代码体积差异，而代码体积越小，会获得更快的加载速度。

js 封装要支持 Treeshaking

推荐级别：强烈

统一支持 Treeshaking 是非常重要的，因为它可以在打包编译时移除未使用的代码，减小输出的文件大小。

在进行 JavaScript 封装时，请牢记以下两点：

在能使用函数实现的情况下，优先使用函数而非 class 或 Object。只有需要频繁创建实例的情况才需要考虑使用 class。
慎重使用 export default 导出。如果你的模块有多个导出，可以考虑逐个导出而非使用 default 导出，这样可以更好地遵循 Treeshaking 的原则，因为 default 导出整个模块会被引入，而逐个导出只会引入需要的部分。

反例 1

const a = 1
const b = () => {}
// a和b被捆绑导出
export default { a, b }

复制代码

反例 2

// 同样的，a 和 b 被绑定在对象上面了，这里如果有使用class习惯的同学一定要注意这点
export default class Utils {
  a() {},
  b() {}
}

复制代码

反例 3

// 这里和class一样
export default function Utils() {
  this.a = () => {}
  this.b = () = {}
}

复制代码

反例 4

// 这里和class一样
export default function Utils() {
  return {
    a() {},
    b() {},
  }
}

复制代码

正例 1

const a = 1
const b = () => {}
export { a, b }

复制代码

正例 2

export const a = 1
export const b = () => {}

复制代码

按需引入

推荐级别：强烈

需要使用的方法/变量/组件，才去 import 导入，不要导入用不到的内容到当前页面内。

反例 1

用到一个导入两个

import { sayHi, sayBye } from './say.js'
sayHi('Vance')

复制代码

反例 2

import * as say from './say.js'
say.sayHi('Vance')

复制代码

正例

用到 sayHi 导入 sayHi

import { sayHi } from './say.js'
sayHi('Vance')

复制代码

不要使用 CommonJS 规范

推荐级别：强烈

虽然蓝河应用支持使用 require 这样子的写法，但一定要避免这样子写。

反例

const userInfo = require('./userInfo.js')

复制代码

正例

import userInfo from './userInfo.js'
// 注意这里的引入仅为示例，实际情况也要尽可能避 免userInfo 全量引入

复制代码

使用常量

推荐级别：强烈

使用常量可以让代码更好的维护，同时也可以达到 Treeshaking 的效果。

反例

const a = {
  a1: 'a1',
  a2: 'a2',
  a3: 'a3',
}

const b = ['a1', 'a2', 'a3']

复制代码

正例

const a1 = 'a1'
const a2 = 'a2'
const a3 = 'a3'
const a = {
  a1: a1,
  a2: a2,
  a3: a3,
}

const b = [a1, a2, a3]

复制代码

慎重引入第三方包

推荐级别：建议

引入外部 npm 包之前请特别留意包的体积大小，如果体积大要按需裁剪源码后再引入。非必要情况下尽量自己实现，不建议直接引入第三方 npm 包，因为那大多是适配 node、浏览器平台的，polyfill 代码较多，不适合嵌入式平台。

反例

import _ from 'lodash'
export default {
  onInit() {
    const list = ['a', 'b', 'c']
    _.join(list, '~')
  },
}

复制代码

正例

export default {
  onInit() {
    const list = ['a', 'b', 'c']
    list.join('~')
  },
}

复制代码

慎重 @import 样式

推荐级别：强烈

样式是没有做 Treeshaking 的，引入一个 css 样式文件，可能会打包进入无用的 css 代码。

反例

<template>
  <div class="yellow">黄色</div>
  <div class="black">黑色</div>
  <div class="green">黄色</div>
</template>
<style>
  @import './color.css';
</style>

复制代码

正例

<template>
  <div>
    <div class="yellow">黄色</div>
    <div class="black">黑色</div>
    <div class="green">黄色</div>
  </div>
</template>
<style>
  .yellow {
    background-color: yellow;
  }
  .black {
    background-color: black;
  }
  .green {
    background-color: green;
  }
</style>

复制代码

页面 template 一定要小

推荐级别：鼓励

设计应用的时候，尽可能拆成多个页面去实现。不要使用 if 的方式，将页面的多个状态全写进一个页面文件里通过参数传递控制。

反例

<div>
  <div if="{{status === 1}}">
    <div>A功能的展示区域</div>
    ...
  </div>
  <div if="{{status === 2}}">
    <div>B功能的展示区域</div>
    ...
  </div>
  <div if="{{status === 3}}">
    <div>C功能的展示区域</div>
    ...
  </div>
</div>

复制代码

正例

//创建A页面 pageA.ux
<template>
  <div>A功能的展示区域</div>
</template>

//创建B页面 pageB.ux
<template>
  <div>B功能的展示区域</div>
</template>

//创建C页面 pageC.ux
<template>
  <div>C功能的展示区域</div>
</template>

复制代码

避免 manifest 配置冗余

推荐级别：建议

文件也要遵循按需引入的原则，如 manifest 中的配置中，没用到的 feature、权限可以不写进来

避免 i18n 配置冗余

推荐级别：建议

国际化 i18n 配置用不到的 key 要移除，另外如果只有一种语言请不要使用国际化配置。

尽量使用箭头函数

推荐级别：建议

使用箭头函数代替 function，可以达到最大程度地减少代码体积。

反例

function getUserInfo() {}

复制代码

正例

const getUserInfo = () => {}

复制代码

对象的属性或方法名称要简短

推荐级别：建议

对象上面的属性/方法名称，尽量的简短，这里是由于属性是无法 tree-shaking，过长的属性/方法名会占用代码体积。

反例

const user = {
  userName: 'Vance',
}

复制代码

正例

const user = {
  name: 'Vance',
}

复制代码

区分生产环境和测试环境

推荐级别：建议

避免将调试阶段的数据、代码带到生产环境上，应该用编译时参数而非运行时参数来区分编译环境变量

合并公共样式

推荐级别：鼓励

应用中的重复样式应尽量抽成公共样式使用，避免在多个 class 里重复写相同样式。

反例

<template>
  <div>
    <div class="box1"></div>
    <div class="box2"></div>
    <text class="box3"></text>
  </div>
</template>

<style>
  .box1 {
    width: 48px;
    height: 48px;
  }
  .box2 {
    background-color: #000000;
    width: 48px;
    height: 48px;
  }
  .box3 {
    font-size: 60px;
    width: 48px;
    height: 48px;
  }
</style>

复制代码

正例

<template>
  <div>
    <div class="box-size"></div>
    <div class="box-size bg-color"></div>
    <text class="box-size font-size"></text>
  </div>
</template>
<style>
  .box-size {
    width: 48px;
    height: 48px;
  }
  .bg-color {
    background-color: #0000ff;
  }
  .font-size {
    font-size: 60px;
  }
</style>