taro之--打包体积

打包体积​

默认而言使用生产模式打包，Taro 就会给你优化打包体积。但值得注意，Taro 默认的打包配置是为了让多数项目和需求都可以运行，而不是针对任何项目的最优选择。因此你可以在 Taro 配置的基础之上再针对自己的项目进行优化。

JavaScript​

在 Taro 应用中，所有 Java(Type)Script 都是通过 babel.config.js 配置的，具体来说是使用 babel-prest-taro 这个 Babel 插件编译的。

默认而言 Taro 会兼容所有 @babel/preset-env 支持的语法，并兼容到 iOS 9 和 Android 5，如果你不需要那么高的兼容性，或者不需要某些 ES2015+ 语法支持，可以自行配置 babel.config.js 达到缩小打包体积效果。

例如我们可以把兼容性提升到 iOS 12：

babel.config.js

// babel.config.js
module.exports = {
  presets: [
    [
      'taro',
      {
        targets: {
          ios: '12',
        },
      },
    ],
  ],
}

你可以访问 Babel 文档 了解更多自定义配置的信息。

打包体积分析​

Taro 使用 Webpack 作为内部的打包系统，有时候当我们的业务代码使用了 require 语法或者 import default 语法，Webpack 并不能给我们提供 tree-shaking 的效果。在这样的情况下我们通过 webpack-bundle-analyzer 来分析我们依赖打包体积，这个插件会在浏览器打开一个可视化的图表页面告诉我们引用各个包的体积。

首先安装 webpack-bundle-analyzer 依赖:

npm install webpack-bundle-analyzer -D

然后在 mini.webpackChain 中添加如下配置：

config/index

const config = {
  ...
  mini: {
    webpackChain (chain, webpack) {
      chain.plugin('analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
    }
  }
}

运行编译命令完成之后就可以看到各文件依赖关系及体积。

你可以访问 webpack-bundle-analyzer 文档了解详细的用法。

分包​

在一些情况，我们希望我们的页面只有当用到时才按需进行加载。这种情况在 Taro 应用被称为分包，分包的使用也非常简单，只需要通过配置入口文件 app.config.js 即可。

假设我们需要把刚刚实现预渲染的所有节点页面进行分包：

src/app.config.js

export default {
  pages: [
    'pages/index/index',
    // 'pages/nodes/nodes', 把要分包的页面从 `pages` 字段中删除
    'pages/hot/hot',
    'pages/node_detail/node_detail',
    'pages/thread_detail/thread_detail'
  ],
  // 在 `subpackages` 字段添加分包，如果目标是支付宝小程序，还需要加一个字段 `subPackages` 值和 `subpackages` 一致
  // 不能在 `pages` 根目录也不能在 pages 目录外，需要在 `pages` 根目录另外新建文件夹做分包
  "subpackages": [
    {
      "root": "pages",
      "pages": [
        "nodes/nodes"
      ]
    }
  ]
  tabBar: {
    list: [{
      'iconPath': 'resource/latest.png',
      'selectedIconPath': 'resource/lastest_on.png',
      pagePath: 'pages/index/index',
      text: '最新'
    }, {
      'iconPath': 'resource/hotest.png',
      'selectedIconPath': 'resource/hotest_on.png',
      pagePath: 'pages/hot/hot',
      text: '热门'
    }, {
      // 如果是分包的子页面，就不能在 `tabBar` 中使用
      'iconPath': 'resource/node.png',
      'selectedIconPath': 'resource/node_on.png',
      pagePath: 'pages/nodes/nodes',
      text: '节点'
    }],
    'color': '#000',
    'selectedColor': '#56abe4',
    'backgroundColor': '#fff',
    'borderStyle': 'white'
  },
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'V2EX',
    navigationBarTextStyle: 'black'
  }
}