webpack用externals优化echarts

2020-01-14 01:08:19

参考地址 一次webpack 的externals配置带来的优化体验

externals官方解释:


防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。


1.优化前


使用echarts的一个项目,使用npm run build 打包以后还有6m左右的大小,如下:



这里打包以后文件明显过大,可能会造成用户体验差。


2.优化


考虑到可能是因为引入的echarts过大,打包时将echarts打包进去了引起的。externals可以将echars脱离webpack打包,可以用来解决这个问题。


2.1 在webpack配置文件中配置externals。


在webpack.base.conf.js文件中配置外部扩展externals,如下:


 externals: {

   echarts: 'echarts',

  },

1

2

3

如下图:



2.2 在模板文件index.html文件中使用cdn引入echarts


使用前需要在模板文件index.html文件中使用cdn引入echarts,否则会报echartsundefined的错误。如下:


<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

1


2.3 在需要使用echarts的地方直接使用


配置外部扩展externals以后,在vue文件中就不需要再使用import或者require引入echarts了,可以直接使用,比如初始化图表就可以直接使用this.$echarts.init()。如下:




2.3 再次打包


再次使用cnpm run build打包,此时dist文件夹已经只有1m多了,大小直接减小了5M,效果立竿见影啊。如下:



打包报告:


打包的时间也有缩短,只有12ms左右,





  • 2018-03-21 22:26:03

    Android BASE64Encoder不能用的问题

    昨天项目与后台交互的接口传参数需要加密,用的是BASE64Encoder加密,可是这个类不能用,谷歌了一下说的是:

  • 2018-03-21 22:28:02

    Java加密算法 AES

    AES 算法 对称加密,密码学中的高级加密标准 2005年成为有效标准

  • 2018-03-24 13:23:26

    Only the original thread that created a view hierarchy can touch its views

    很多网友在Android中使用多线程处理UI相关内容时可能会发现Logcat提示Only the original thread that created a view hierarchy can touch its views这样的错误,这主要是Android的相关View和控件不是线程安全的,我们必须做独立的处理这点比J2ME麻烦一些,这里Android给 我们提供了很多方法,有关线程的

  • 2018-03-26 18:05:09

    MYSQL OR与AND一起 的用法

    查询结果是id = 2且age = 20或者id=1SELECT * from student WHERE id = 1 or id = 2 AND age = 20;12

  • 2018-03-27 11:27:09

    Java中Set集合的使用

    Set类继承了Conllection类,是一种集合类。Set的实现类有三个,下面我们会一一来说这些的不一样。

  • 2018-03-27 11:36:58

    Java中数组、List、Set互相转换

    需要注意的是, Arrays.asList() 返回一个受指定数组决定的固定大小的列表。所以不能做 add 、 remove等操作,否则会报错。

  • 2018-03-27 16:37:57

    Java 8 将List转换为Map

    几个Java 8示例来向您展示如何将一个List对象转换为一个Map,以及如何处理重复的键