webpack 配置echarts 按需加载
引入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 按需加载的更多相关文章
- 【webpack整理】一、安装、配置、按需加载
如果你: 是前端热爱者 :) 有JavaScript/nodejs基础 会使用一些常用命令行,mkdir,cd,etc. 会使用npm 想对webpack有更深的认识,或许此时你恰好遇到关于webpa ...
- webpack中实现按需加载
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...
- webpack学习笔记--按需加载
为什么需要按需加载 随着互联网的发展,一个网页需要承载的功能越来越多. 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里 ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- React Router 4.0 + webpack 实现组件按需加载
网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...
- webpack配置sass模块的加载
webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置.这里不讲webpack的入门,入门的文章,我推荐这篇<webpack入门>. 为了使用sass,我们需要 ...
- webpack require.ensure 按需加载
使用 vue-cli构建的项目,在 默认情况下 ,会将所有的js代码打包为一个整体比如index.js.当使用存在多个路由代码的时候,index.js可能会超大,影响加载速度. 这个每个路由页面除了i ...
- webpack 事件触发 按需加载
比较易懂, 方法简单 var util_sync = require('./util-sync.js') alert(util_sync.data) document.getElementById(& ...
- react中create-react-app配置antd按需加载(方法二)
1.yarn add babel-plugin-import 2.在根目录下的package.json下的bable中添加相应代码 "babel": { "presets ...
随机推荐
- docker_NG部署前端总结
Dockerfile 写法 FROM nginx MAINTAINER gradyjiang "jiangzhongjin@hotmail.com" ENV LANG C.UTF- ...
- Maven 过滤问题
<build> <resources> <resource> <directory>src/main/resources</directory&g ...
- k8s中几个基本概念的理解,pod,service,deployment,ingress的使用场景
k8s 总体概览 前言 Pod 副本控制器(Replication Controller,RC) 副本集(Replica Set,RS) 部署(Deployment) 服务(Service) ingr ...
- 学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序(完)
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- 【疑难杂症】奇异值分解(SVD)原理与在降维中的应用
前言 在项目实战的特征工程中遇到了采用SVD进行降维,具体SVD是什么,怎么用,原理是什么都没有细说,因此特开一篇,记录下SVD的学习笔记 参考:刘建平老师博客 https://www.cnblogs ...
- Compose 模板文件
模板文件是使用 Compose 的核心,涉及到的指令关键字也比较多.但大家不用担心,这里面大部分指令跟 docker run 相关参数的含义都是类似的. 默认的模板文件名称为 docker-compo ...
- Loki 简明教程
文章转载参考自:https://jishuin.proginn.com/p/763bfbd2ac34 Loki 是 Grafana Labs 团队最新的开源项目,是一个水平可扩展,高可用性,多租户的日 ...
- Elasticsearch:Split index API - 把一个大的索引分拆成更多分片
文章转载自:https://blog.csdn.net/UbuntuTouch/article/details/108960950
- 彻底掌握Makeifle(三)
彻底掌握Makeifle(三) 前言 在前面的文章彻底掌握Makefile(一)和彻底掌握Makefile(二)当中,我们简要的介绍了一些常见的makefile使用方法,在本篇文章当中我们将继续介绍一 ...
- 银河麒麟安装node,mysql,forever环境
这就是国产银河系统的界面,测试版本是麒麟V10 链接: https://pan.baidu.com/s/1_-ICBkgSZPKvmcdy1nVxVg 提取码: xhep 一.传输文件 cd /hom ...