lin-xi / babel-plugin-import-fix

alter import module to certain module file path for smaller bundle and better performance

babel-plugin-import-fix

alter import module to certain module file path for smaller bundle file and better performance

主要功能是修改import，缩小import的范围，减少bundle文件大小，提升性能

---

import {Button} from 'antd';

after fix:

import {Button} from 'antd/lib/button';
import 'antd/lib/button/style'

these fixies are made on ast. bundle file size decrease from 1.5Mb to 286Kb.

---

how to use

npm install babel-plugin-import-fix -D

config it in your .babelrc

在.babelrc里进行配置

.babelrc

{
  "presets": [
    ["es2015", { "modules": false }], "react"
  ],
  "plugins": ["import-fix"]
}

---

supported framework

framework	status
xcui	✅
antd	✅
elementUI	✅
material-ui	✅
d3	✅

---

more library will be supported increasingly

默认直接支持这些库，不需要配置，会不断增加支持的类型

extend usage:

you can overwrite the config or add new config like this:

扩展支持的库，如果没有css，可以不写cssPath，或设置为空

.babelrc

{
  "presets": [
    ["es2015", { "modules": false }], "react"
  ],
  "plugins": [["import-fix", [
    {
      'libraryName': 'xcui',
      'libraryPath': 'xcui/lib/${name}.js',
      'namePolicy': 'dash',
      'cssPath': ['xcui/lib/css/common.css', 'xcui/lib/css/${name}.css']
    },
    {
      'libraryName': 'antd',
      'libraryPath': 'antd/lib/${name}/index.js',
      'namePolicy': 'dash',
      'cssPath': 'antd/lib/${name}/style/index.css'
    }
  ]]]
}

cssPath can be a string or an array or an empty string, if you hava multiple css files to import, use an array. you may igonre cssPath if you don't need.

cssPath可以是字符或数组

---

name policy

three policy are supported

namePolicy选项

• dash, date-picker
• camel, DatePicker
• underline, date_picker

---

default config:

默认配置

[
  {
    'libraryName': 'antd',
    'libraryPath': 'antd/lib/${name}/index.js',
    'namePolicy': 'dash',
    'cssPath': 'antd/lib/${name}/style/index.css'
  },
  {
    'libraryName': 'material-ui',
    'libraryPath': 'material-ui/${name}/index.js',
    'namePolicy': 'camel',
    'cssPath': ''
  },
  {
    'libraryName': 'xcui',
    'libraryPath': 'xcui/lib/${name}.js',
    'namePolicy': 'dash',
    'cssPath': ['xcui/lib/css/common.css', 'xcui/lib/css/${name}.css']
  },
  {
    'libraryName': 'element-ui',
    'libraryPath': 'element-ui/lib/${name}.js',
    'namePolicy': 'dash',
    'cssPath': ['element-ui/lib/theme-default/base.css', 'element-ui/lib/theme-default/${name}.css']
  },
  {
    'libraryName': 'd3',
    'libraryPath': 'd3-${name}/index.js',
    'namePolicy': 'dash',
    'cssPath': ''
  }
]

---

thanks:

https://github.com/ant-design/babel-plugin-import