Merge pull request #372 from ElemeFE/0614-fix-common

feat: 优化包体积

build/config.js

@@ -0,0 +1,42 @@
+module.exports = {
+  pkgTypeList: [
+    { type: 'cjs', min: false, suffix: '.common.js' },
+    { type: 'cjs', min: true, suffix: '.common.min.js' },
+    { type: 'umd', min: false, suffix: '.js' },
+    { type: 'umd', min: true, suffix: '.min.js' }
+  ],
+  addons: [
+    {
+      min: false,
+      type: 'es',
+      suffix: '.esm.js',
+      globalName: '',
+      src: 'src/index.es.js',
+      dist: 'lib/index'
+    },
+    {
+      min: false,
+      type: 'cjs',
+      suffix: '.js',
+      globalName: '',
+      src: 'src/core.js',
+      dist: 'lib/core'
+    },
+    {
+      min: false,
+      type: 'cjs',
+      suffix: '.js',
+      globalName: '',
+      src: 'src/utils.js',
+      dist: 'lib/utils'
+    },
+    {
+      min: false,
+      type: 'cjs',
+      suffix: '.js',
+      globalName: '',
+      src: 'src/constants.js',
+      dist: 'lib/constants'
+    }
+  ]
+}

build/rollup.config.js

@@ -8,79 +8,53 @@ const componentInfo = require('../src/component-list')
 const uglify = require('rollup-plugin-uglify').uglify
 const autoprefixer = require('autoprefixer')
 const cssnano = require('cssnano')
+const path = require('path')
+const fs = require('fs')
+const { pkgTypeList, addons } = require('./config')
 
 let pkg = []
-const pkgTypeList = [
-  { type: 'cjs', min: false, suffix: '.common.js' },
-  { type: 'cjs', min: true, suffix: '.common.min.js' },
-  { type: 'umd', min: false, suffix: '.js' },
-  { type: 'umd', min: true, suffix: '.min.js' }
-]
 
 pkgTypeList.forEach(({ type, min, suffix }) => {
   Object.keys(componentInfo).forEach(name => {
     const { src, dist } = componentInfo[name]
-    pkg.push({
-      min,
-      type,
-      suffix,
-      globalName: name,
-      src,
-      dist
-    })
+    pkg.push({ min, type, suffix, globalName: name, src, dist })
   })
 })
 
-const addons = [
-  {
-    min: false,
-    type: 'es',
-    suffix: '.esm.js',
-    globalName: '',
-    src: 'src/index.es.js',
-    dist: 'lib/index'
-  }
-]
 pkg = pkg.concat(addons)
 
 pkg.forEach(item => { rollupFn(item) })
 
-function rollupFn (item) {
-  const vueSettings = item.min
+fs.mkdirSync(path.resolve(__dirname, '../lib'))
+
+async function rollupFn (item) {
+  const { min, dist, suffix, src: input, type: format, globalName: name } = item
+  const vueSettings = min
     ? { css: 'lib/style.min.css', postcss: [autoprefixer, cssnano] }
     : { css: 'lib/style.css', postcss: [autoprefixer] }
-
   const plugins = [
-    eslint({
-      throwError: true,
-      exclude: 'node_modules/**'
-    }),
+    eslint(),
     vue(vueSettings),
-    resolve({
-      extensions: ['.js', '.vue']
-    }),
-    babel({
-      exclude: 'node_modules/**',
-      plugins: ['external-helpers']
-    })
+    resolve({ extensions: ['.js', '.vue'] }),
+    babel({ plugins: ['external-helpers'] })
   ]
-  if (item.min) plugins.push(uglify({}, minify))
+  if (min) plugins.push(uglify({}, minify))
 
-  rollup.rollup({
-    input: item.src,
-    external: id => /^(echarts)/.test(id),
-    plugins
-  }).then(function (bundle) {
-    return bundle.write({
-      format: item.type,
-      name: item.globalName,
-      globals: {
-        'echarts/lib/echarts': 'echarts'
-      },
-      file: item.dist + item.suffix
-    })
-  }).catch((e) => {
-    console.log(e)
-    process.exit(1)
-  })
+  const distPath = '../' + dist + suffix
+  const isCommonjs = format === 'cjs'
+  let reg = isCommonjs
+    ? /(^(echarts|numerify|utils-lite)|(\/core|\/utils|\/constants)$)/
+    : /^(echarts)/
+  const external = id => reg.test(id)
+  const globals = { 'echarts/lib/echarts': 'echarts' }
+
+  const bundle = await rollup.rollup({ input, external, plugins })
+  let { code } = await bundle.generate({ format, name, globals })
+  if (isCommonjs) {
+    code = code.replace(
+      /require\('(.*)\/(utils|core|constants)'\)/g,
+      'require(\'./$2\')'
+    )
+  }
+  fs.writeFileSync(path.resolve(__dirname, distPath), code)
 }

build/webpack.config.js

@@ -18,8 +18,7 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.vue'],
     alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      '@': './src'
+      'vue$': 'vue/dist/vue.esm.js'
     }
   },
   devServer: {

docs/en/README.md

@@ -18,6 +18,11 @@ npm i v-charts echarts -S
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
 ```
 
+> when using bmap or amap need to add additional modules
+> <br>`<script src="https://cdn.jsdelivr.net/npm/echarts-amap/dist/echarts-amap.min.js"></script>`
+> <br>`<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>`
+
+
 #### Example
 
 [online demo](https://jsfiddle.net/vue_echarts/hc4xhyva)

docs/en/skill-demo.md

@@ -8,7 +8,7 @@ call the echarts resize function.
 <vuep template="#container-width"></vuep>
 
 <script v-pre type="text/x-template" id="container-width">
-<template>
+<template>  <!-- [_ https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js,https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-default/index.css _] -->
   <el-tabs type="border-card" v-model="activeName">
     <el-tab-pane label="用户管理" name="1"> <!-- name 中的数字对应chart的ref -->
       <ve-line :data="chartData" ref="chart1"></ve-line>

docs/en/start.md

@@ -24,30 +24,30 @@ Each chart component of v-charts is individually packaged under the lib folder
 
 ```
 |- lib/
-    |- line.js  -------------- Line Chart
-    |- bar.js  --------------- Bar Chart
-    |- histogram.js  --------- Histogram Chart
-    |- pie.js  --------------- Pie Chart
-    |- ring.js  -------------- Ring Chart
-    |- funnel.js  ------------ Funnel Chart
-    |- waterfall.js  --------- Waterfall Chart
-    |- radar.js  ------------- Radar Chart
-    |- map.js  --------------- Map Chart
-    |- sankey.js  ------------ Sankey Chart
-    |- heatmap.js  ----------- Heatmap Chart
-    |- scatter.js  ----------- Scatter Chart
-    |- candle.js  ------------ Candle Chart
-    |- gauge.js  ------------- Gauge Chart
-    |- tree.js  -------------- Tree Chart
-    |- bmap.js  -------------- Baidu map
-    |- amap.js  -------------- Amap
+    |- line.common.js  -------------- Line Chart
+    |- bar.common.js  --------------- Bar Chart
+    |- histogram.common.js  --------- Histogram Chart
+    |- pie.common.js  --------------- Pie Chart
+    |- ring.common.js  -------------- Ring Chart
+    |- funnel.common.js  ------------ Funnel Chart
+    |- waterfall.common.js  --------- Waterfall Chart
+    |- radar.common.js  ------------- Radar Chart
+    |- map.common.js  --------------- Map Chart
+    |- sankey.common.js  ------------ Sankey Chart
+    |- heatmap.common.js  ----------- Heatmap Chart
+    |- scatter.common.js  ----------- Scatter Chart
+    |- candle.common.js  ------------ Candle Chart
+    |- gauge.common.js  ------------- Gauge Chart
+    |- tree.common.js  -------------- Tree Chart
+    |- bmap.common.js  -------------- Baidu map
+    |- amap.common.js  -------------- Amap
 ```
 
 When used, a single chart component can be directly import into the project.
 
 ```js
 import Vue from 'vue'
-import VeLine from 'v-charts/lib/line'
+import VeLine from 'v-charts/lib/line.common'
 import App from './App.vue'
 
 Vue.component(VeLine.name, VeLine)

docs/index.html

@@ -26,18 +26,20 @@
   <div id="app"></div>
   <script>
     window.VUEP_FORM_RESOURCE = [
-      '<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"><\/script>',
-      '<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"><\/script>',
-      '<script src="https://cdn.jsdelivr.net/npm/echarts-amap/dist/echarts-amap.min.js"><\/script>',
-      '<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"><\/script>',
-      '<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"><\/script>',
-      '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">'
+      '<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"><\/script>'
+    ]
+    window.VUEP_RESOURCE = [
+      "https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js",
+      "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js",
+      "https://cdn.jsdelivr.net/npm/echarts-amap/dist/echarts-amap.min.js",
+      "https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js",
+      "https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css"
     ]
     window.$docsify = {
       name: 'v-charts',
       repo: 'https://github.com/elemefe/v-charts',
       loadSidebar: 'sidebar.md',
-      ga: 'UA-104697795-1',
+      ga: 'UA-120605025-3',
       homepage: 'install.md',
       formatUpdated: '{MM}/{DD} {HH}:{mm}',
       auto2top: true,
@@ -98,7 +100,7 @@
   <script src="//cdn.jsdelivr.net/npm/babel-standalone/babel.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/shap/sdk/Shap.umd.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
-  <script src="//cdn.jsdelivr.net/npm/[email protected].3/dist/vuep.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/[email protected].8/dist/vuep.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/echarts-amap/dist/echarts-amap.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>

docs/install.md

@@ -17,6 +17,10 @@ npm i v-charts echarts -S
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
 ```
 
+> 使用百度地图或高德地图时需要额外引入相应的模块
+> <br>`<script src="https://cdn.jsdelivr.net/npm/echarts-amap/dist/echarts-amap.min.js"></script>`
+> <br>`<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>`
+
 ### cdn示例
 
 #### 全部引入

docs/skill-demo.md

@@ -8,7 +8,7 @@
 <vuep template="#container-width"></vuep>
 
 <script v-pre type="text/x-template" id="container-width">
-<template>
+<template> <!-- [_ https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js,https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-default/index.css _] -->
   <el-tabs type="border-card" v-model="activeName">
     <el-tab-pane label="用户管理" name="1"> <!-- name 中的数字对应chart的ref -->
       <ve-line :data="chartData" ref="chart1"></ve-line>

docs/start.md

@@ -25,28 +25,28 @@ new Vue({
 v-charts的每种图表组件，都单独打包到lib文件夹下
 ```
 |- lib/
-    |- line.js  -------------- 折线图
-    |- bar.js  --------------- 条形图
-    |- histogram.js  --------- 柱状图
-    |- pie.js  --------------- 饼图
-    |- ring.js  -------------- 环图
-    |- funnel.js  ------------ 漏斗图
-    |- waterfall.js  --------- 瀑布图
-    |- radar.js  ------------- 雷达图
-    |- map.js  --------------- 地图
-    |- sankey.js  ------------ 桑基图
-    |- heatmap.js  ----------- 热力图
-    |- scatter.js  ----------- 散点图
-    |- candle.js  ------------ k线图
-    |- gauge.js  ------------- 仪表盘
-    |- tree.js  -------------- 树图
-    |- bmap.js  -------------- 百度地图
-    |- amap.js  -------------- 高德地图
+    |- line.common.js  -------------- 折线图
+    |- bar.common.js  --------------- 条形图
+    |- histogram.common.js  --------- 柱状图
+    |- pie.common.js  --------------- 饼图
+    |- ring.common.js  -------------- 环图
+    |- funnel.common.js  ------------ 漏斗图
+    |- waterfall.common.js  --------- 瀑布图
+    |- radar.common.js  ------------- 雷达图
+    |- map.common.js  --------------- 地图
+    |- sankey.common.js  ------------ 桑基图
+    |- heatmap.common.js  ----------- 热力图
+    |- scatter.common.js  ----------- 散点图
+    |- candle.common.js  ------------ k线图
+    |- gauge.common.js  ------------- 仪表盘
+    |- tree.common.js  -------------- 树图
+    |- bmap.common.js  -------------- 百度地图
+    |- amap.common.js  -------------- 高德地图
 ```
 使用时，可以直接将单个图表引入到项目中
 ```js
 import Vue from 'vue'
-import VeLine from 'v-charts/lib/line'
+import VeLine from 'v-charts/lib/line.common'
 import App from './App.vue'
 
 Vue.component(VeLine.name, VeLine)

examples/router.js

@@ -1,8 +1,6 @@
 /* eslint-disable comma-dangle */
 import Vue from 'vue'
 import Router from 'vue-router'
-import Install from './pages/install'
-import Chart from './pages/chart'
 
 Vue.use(Router)
 
@@ -23,7 +21,9 @@ export const TEST_ROUTES = [
 
 export default new Router({
   routes: [
-    { path: '/', name: '安装', component: Install },
-    { path: '/chart/:type', name: '图表', component: Chart }
+    { path: '/', name: '安装', component: () => import('./pages/install') },
+    { path: '/chart/:type', name: '图表', component: () => import('./pages/chart') },
+    { path: '/bmap', name: '百度地图', component: () => import('./pages/bmap') },
+    { path: '/amap', name: '高德地图', component: () => import('./pages/amap') },
   ].concat(TEST_ROUTES)
 })