引入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. Queue-jumpers - 平衡树

    题面 Ponyo and Garfield are waiting outside the box-office for their favorite movie. Because queuing i ...

  2. Windows平台真实时毫秒级4K H264/H265直播技术方案

    背景 在刚提出4K视频的时候,大多数人都觉得没有必要,4K的出现,意味着更高的硬件规格和传输要求,1080P看的很爽.很清晰,完全满足了日常的需求.随着电视的尺寸越来越大,原本1080P成像已经无法满 ...

  3. KingbaseES V8R3集群运维案例之---主库系统down failover切换过程分析

    ​ 案例说明: KingbaseES V8R3集群failover时两个cluster都会触发,但只有一个cluster会调用脚本去执行真正的切换流程,另一个有对应的打印,但不会调用脚本,只是走相关的 ...

  4. zookeeper_mac安装总结

    Zookeeper mac安装总结 1. 执行 brew install zookeeper 可能遇到报错 Error: The following directories are not writa ...

  5. Q准则涡识别方法

    Q准则(Q Criterion)在涡识别中计算效率高,效果也不错,是一种常用的涡提取/识别方法. 了解Q准则需要从速度梯度张量入手,而速度梯度张量可以分解成两部分 \[\frac{\partial u ...

  6. WebDriver常见操作

    本文当个记录贴,记录WebDriver常用的一些函数(含自己封装的函数) 让WebDriver使用浏览器用户设置 1 option = webdriver.ChromeOptions() 2 opti ...

  7. Windows 2012 R2 iSCSI server

     Windows 2012 R2可以充当一台简单的SAN,提供iSCSI方式的连接,供客户端使用.不确定是否有人会这么使用,但至少在做实验的时候我觉得挺方便的.不用再像以前专门安装windows ...

  8. 【To B产品怎么做?】泛用户体验

    目录 - 什么是泛用户体验? - 如何做好泛用户体验? - 泛用户体验有什么用? *预计阅读时间15分钟 不知道你有没有过这种体验,客服妹子的声音软糯,氛围微妙,用词标准,张口就是:给你带来了不好的体 ...

  9. 基于HBuilderX+UniApp+ThorUI的手机端前端的页面组件化开发经验

    现在的很多程序应用,基本上都是需要多端覆盖,因此基于一个Web API的后端接口,来构建多端应用,如微信.H5.APP.WInForm.BS的Web管理端等都是常见的应用.本篇随笔继续分析总结一下项目 ...

  10. Kibana探索数据(Discover)

    总结说明: 1.先在Management/Kibana/Index Patterns 界面下添加索引模式(前提是有索引数据) 2.在Discover界面选中响应的索引模式 3.开启Kibana 查询语 ...