引入babel-plugin-equire插件,方便使用。

yarn add babel-plugin-equire -D

在.babelrc文件中的配置
{
"presets": [
"env","stage-0"
],
"plugins": ["syntax-dynamic-import","transform-object-rest-spread","equire"]
}

 主要是 equire 前面是自己别的配置

创建@/lib/echarts文件
const echarts = equire([
'bar',
'legend',
'graphic',
'title',
'color',
'tooltip',
'line',
'pie'
]) export default echarts

  在主文件中引用

import echarts from '@/util/echarts'

Vue.prototype.$echarts = echarts

  就可以使用啦  实验了下 按我的需求 比之前大约小了 300KB 左右

 

webpack 配置echarts 按需加载的更多相关文章

  1. 【webpack整理】一、安装、配置、按需加载

    如果你: 是前端热爱者 :) 有JavaScript/nodejs基础 会使用一些常用命令行,mkdir,cd,etc. 会使用npm 想对webpack有更深的认识,或许此时你恰好遇到关于webpa ...

  2. webpack中实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

  3. webpack学习笔记--按需加载

    为什么需要按需加载 随着互联网的发展,一个网页需要承载的功能越来越多. 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里 ...

  4. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  5. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  6. webpack配置sass模块的加载

    webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置.这里不讲webpack的入门,入门的文章,我推荐这篇<webpack入门>. 为了使用sass,我们需要 ...

  7. webpack require.ensure 按需加载

    使用 vue-cli构建的项目,在 默认情况下 ,会将所有的js代码打包为一个整体比如index.js.当使用存在多个路由代码的时候,index.js可能会超大,影响加载速度. 这个每个路由页面除了i ...

  8. webpack 事件触发 按需加载

    比较易懂, 方法简单 var util_sync = require('./util-sync.js') alert(util_sync.data) document.getElementById(& ...

  9. react中create-react-app配置antd按需加载(方法二)

    1.yarn add babel-plugin-import 2.在根目录下的package.json下的bable中添加相应代码 "babel": { "presets ...

随机推荐

  1. Flink介绍

    1,简介 Flink是Apache基金会旗下的一个开源大数据处理框架.Flink很牛逼,好多牛逼的公司都在用. 2,特征 *高吞吐和低延迟.每秒处理百万个时间,毫秒级延迟.有点既要老婆好,又要彩礼少的 ...

  2. 【java】学习路径43-IO流总结与练习题!

    总结 说白了,字节流就是处理类似图片文件.视频文件这些不能直接用记事本打开看的明白的文件. 字符流就是处理可以用记事本直接看的文件. 无论是字节流还是字符流,都有有输入输出两类.(废话) 如果要读取字 ...

  3. Stringboot中@Autowired加了static就属性值就为null

    //错误 @Autowired private static DepartmentDao departmentDao; @Autowired注入,将bean注入进来 @Autowired通过sprin ...

  4. vim编辑器使用详解

    Linux之vim编辑器使用 vim三种模式:命令模式,插入模式,退出模式 移动光标操作 左移动一个字符: 按 h 键 右移动一个字符:按 l 键 下移动一行:按 j 键 上移动一行:按 k 键 移动 ...

  5. python3之35个关键字详解

    一. python35个关键字列举: help("keywords")查看运行结果: 1. and.or.not 2. if.elif.else3. for.while4. Tru ...

  6. 第一章 kubernetes概述

    一.Kubernetes概述 1.官网地址:https://kubernetes.io 2.GuiHub:https://github.com/kubernetes/kubernetes 3.又来:谷 ...

  7. Python中None作为索引的作用

    None的作用主要是在使用None的位置新增一个维度. a = np.arange(25).reshape(5,5) print(a) ''' [[ 0 1 2 3 4] [ 5 6 7 8 9] [ ...

  8. dp-位移模型(数字三角形演变)

    由数字三角形问题演变而来下面的题: https://www.cnblogs.com/sxq-study/p/12303589.html 一:规定位移方向 题目: Hello Kitty想摘点花生送给她 ...

  9. [Python]-json模块-处理字典数据的存取

    import json 函数 json.dumps() json.dumps()函数是将字典转化为字符串 json.loads() json.loads()函数是将字符串转化为字典 注意: 从json ...

  10. uniapp|微信小程序获取当前城市名称--逆地址解析

    六年代码两茫茫,不思量,自难忘 6年资深前端主管一枚,只分享技术干货,项目实战经验 关注博主不迷路~ 问题 uniapp开发的小程序需要获取当前城市名称 解决步骤 看文档 当然是看uniapp文档,我 ...