小程序 (Taro) 减小包体积:压缩代码以及分包的实现

用Taro做的小程序快要完工了,奈何每个包的大小只能为2M,总大小不能超过8M。所以就需要压缩代码和分包了。由于这是我第一个小程序的项目,所以我把我踩到的坑详细讲一下,欢迎大家来分享宝贵意见以及补充~
压缩代码:
plugins.uglify
Taro官方给出的配置项,用来配置 UgligyJS 工具,设置打包过程中的 JS 代码压缩。可以通过 plugins.uglify.enable 来设置是否开启压缩,若设置开启,则可以通过 plugins.uglify.config 来设置 UgligyJS 的配置项,具体配置方式如下:

uglify: {
  enable: true,
  config: {
    // 配置项同 https://github.com/mishoo/UglifyJS2#minify-options
  }
}

只需要在config下的prod.js里配置就可以了
小程序 (Taro) 减小包体积:压缩代码以及分包的实现_第1张图片
官方文档:编译压缩配置
压缩图片:
图片的压缩也是很重要的,推荐一个压缩图片的网站:图片压缩
分包
配置方法:
假如小程序目录如下
├── app.js
├── app.json
├── app.wxss
├── subPackages
│ └── pages
│ ├── cat
│ └── dog
├── pages
│ ├── index
│ └── logs
└── utils
那么在app.json中要这样配置:

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "subPackages",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }
  ]
}
字段 类型 说明
root String 分包根目录
name String 分包别名,分包预下载时可以使用
pages StringArray 分包页面路径,相对与分包根目录
independent Boolean 分包是否是独立分包

最重要的是找了很多地方都没有写分包的路由跳转要怎么写,试了半天终于试出来了:

Taro.navigateTo({
	url: '/subPackages/pages/cat'
});

官方文档:使用分包

你可能感兴趣的:(Taro,小程序,reactjs,javascript,前端,es6)