引入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. ubantu安装中文失败的改正方法

    情况说明 一开始我也是像博主们那样安装,但是一直在这个界面安装失败,太悲伤了!! 报错内容 c Failed to fetch http://us.archive.ubuntu.com/ubuntu/ ...

  2. 【MySQL】从入门到精通8-SQL数据库编程

    上期:[MySQL]从入门到精通7-设计多对多数据库 第零章:Mac用户看这里: mac终端写MySQL和windows基本相同,除了配置环境变量和启动有些许不同以外. 先配置环境变量,在终端输入vi ...

  3. 【manim】学习路径2-构建一些基础的图形,场景

    头文件引入 导入manim命名空间 from manim import * manim基本结构 这是一个最基本的manim结构,格式: from manim import * class 类的名字(S ...

  4. 前端利器躬行记(8)——VSCode插件研发

    VSCode提供了丰富的 API,可以借助编辑器扩展许多定制功能. 本次研发了一款名为 Search Method 的插件,在此记录整个研发过程. 一.准备工作 1)安装环境 首先是全局安装 yo 和 ...

  5. 解决element-ui中组件【el-upload】一次性上传多张图片的问题

    element-ui 中的组件 el-upload默认的行为是一张图片请求一次,在项目需求中,通常是多张图片要求只向后台请求一次,下面的做法就是为了实现这样的需求 前端 <el-upload r ...

  6. 2022 CLion 中的Cygwin 配置(最全,最良心版)

    目录 前景提要 一.windows 10 安装Cygwin 1.找到官网,进入官网,百度搜索或者点击下边链接. 2.找到如图位置,双击下载 3.下载完成后,找到下载的位置,双击exe文件. 4.进入欢 ...

  7. Object.keys的‘诡异’特性,你值得收藏!

    先从'诡异'的问题入手 例1: 纯Number类型的属性 const obj = { 1: 1, 6: 6, 3: 3, 2: 2 } console.log('keys', Object.keys( ...

  8. Redis基本数据结构ZipList

    为什么要有ziplist 有两点原因: 普通的双向链表,会有两个指针,在存储数据很小的情况下,我们存储的实际数据的大小可能还没有指针占用的内存大,是不是有点得不偿失?而且Redis是基于内存的,而且是 ...

  9. Vmware部署Linux无人值守安装Centos7系统

    Linux - 无人值守安装服务 # 需求分析 - 使用光盘镜像来安装 Linux 系统的方式; 坦白讲, 该方法适用于只安装少量 Linux 系统的情况, 如果生产环境中有数百台服务器都需安装系统, ...

  10. innodb_flush_log_at_trx_commit 和 sync_binlog 参数详 解

    "innodb_flush_log_at_trx_commit"和"sync_binlog"两个参数是控制 MySQL 磁盘写入策略以及数据安全性的关键参数.当 ...