引入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. IDEA:库源与类的字节码不匹配

    在我配置pom.xml文件后,进行代码编辑,发现引入的方法并不是想要的内容,然后我就进入下载源码后进入到源码中发现我想要的方法和导入的jar包内的源码方法并不相同 ,于是到jar的存放地址中将其他版本 ...

  2. 「学习笔记」倍增思想与lca

    目录 ST表 算法 预处理 查询 关于 log2 Code 预处理 查询 例题 P2880 P2048 lca 树上 RMQ 前置知识:欧拉序列 算法 Code 离线 Tarjan 算法 Code 倍 ...

  3. C# for循环创建多线程

    这里仅讨论Task多线程编程,不讨论其他可以使用多线程的情况,比如Beginxxx,Thread等 一般情况下,如果有多个线程需要同是启动,且每个线程中使用了集合collection中的序号. 比如参 ...

  4. 安装配置华为Fusion access(Windows AD)桌面云并对接Fusion Compute与Windows_server_2012

    安装Fusion access虚拟机 根据自己情况自定义 点击编辑虚拟机设置 添加镜像 点击确定并开启此虚拟机 选择第二个 Install 添加Network:修改hostname:修改密码 回车添加 ...

  5. Linux_tail总结

    tail 命令用法 功能从尾部显示文件若干行 语法: tail [ +/- num ][参数] 文件名 使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把 ...

  6. k8s中计算资源策略 Limit Range

    文章转载自:https://www.kuboard.cn/learning/k8s-advanced/policy/lr.html 默认情况下,容器在 Kubernetes 集群上运行时,不受 计算资 ...

  7. nginx日志参数及含义

    参数含义 $remote_addr,$http_x_forwarded_for #记录客户端IP地址 $remote_user #记录客户端用户名称 $request #记录请求的URL和HTTP协议 ...

  8. Elastic:用 Docker 部署 Elastic Stack

    文章转载自:https://elasticstack.blog.csdn.net/article/details/100919273 前提条件 首选需要在主机上安装好docker和docker-com ...

  9. 【原创】推流录屏软件OBS使用教程--录屏

    之前有录屏需要,写了一篇关于ffmpeg录屏的文章,反响还不错,但是直接用ffmpeg门槛有些高,今天写一篇图形界面的录屏推流工具OBS的使用教程.这次先写OBS的录屏教程 下载安装 点击 OBS官网 ...

  10. [题解] LOJ 3300 洛谷 P6620 [省选联考 2020 A 卷] 组合数问题 数学,第二类斯特林数,下降幂

    题目 题目里要求的是: \[\sum_{k=0}^n f(k) \times X^k \times \binom nk \] 这里面出现了给定的多项式,还有组合数,这种题目的套路就是先把给定的普通多项 ...