@ali/babel-plugin-rx-components-ondemand

此插件可以在 rx 项目构建时自动去除未能在代码中使用的 import 组件

• 使用方法:

  • 安装插件

    tnpm install @ali/babel-plugin-rx-components-ondemand --save-dev

  • 在 .babelrc 或者 webpack 的 babel loader 中添加该组件的引用

    {
      "plugins": [['@ali/babel-plugin-rx-components-ondemand']]
    }

  • 现在 build 的时候就会分析代码中引用的组件是否真的被调用了,如果调用的话才会被打包

• 使用前后对比:

  • 使用前打包信息(全量打包):

  Time: 3002ms
                 Asset    Size  Chunks       Chunk Names
      p/index/index.js  124 kB       0       p/index/index
  p/index/index.js.map  128 kB       0       p/index/index
  webpack: bundle is now VALID.

  • 若使用本插件并在项目中使用View,Link,Text时(按需打包):

  import {View, Text , Image ,Link, TextInput, Button ,ScrollView } from '@ali/rx-components';
  

  Time: 1675ms
                 Asset     Size  Chunks       Chunk Names
      p/index/index.js  87.7 kB       0       p/index/index
  p/index/index.js.map  96.9 kB       0       p/index/index
  webpack: bundle is now VALID.

  Image, TextInput, Button, ScrollView 引入但未使用的组件也不会进行打包