Skip to content
🔨import element-ui、antd 时缩小引用范围,优化打包
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
src
.eslintrc
.gitignore
.travis.yml
CHANGELOG.md
ISSUETEMPLATE.md
Makefile
README.md
package.json

README.md

babel-plugin-import-opt

license Build Status npm NPM downloads

一般项目中并不会使用到element-uiantd的所有组件,按需引入后可以大幅度减少打包体积。

使用前用法:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

使用后用法:

import { Button } from 'element-ui'

本插件会按需引入对应组件和样式依赖,并进行组件全局注册。

相当于下面写法。

import Button from 'element-ui/lib/button'
import 'element-ui/lib/theme-chalk/button.css'
const components = [
  Button
]
components.forEach(component => {
  Vue.component(component.name, component)
})

快速使用

npm i babel-plugin-import-opt -D

在.babelrc里进行配置

.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "import-opt"]
}

目前支持element-ui、antd

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

.babelrc

{
  "presets": [
    ["es2015", { "modules": false }], "react"
  ],
  "plugins": [["import-fix", [
    {
      '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': 'antd',
      'libraryPath': 'antd/lib/${name}/index.js',
      'namePolicy': 'dash',
      'cssPath': 'antd/lib/${name}/style/index.css'
    }
  ]]]
}

cssPath可以是字符或数组

issue模板

更新日志

Quote

主要是参考antd对import引用的优化,并在此基础上增加配置项,可扩展使用(element-ui)

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

You can’t perform that action at this time.