一次webpack 的externals配置带来的优化体验

拼搏现实的明天。 2021-10-26 11:29 553阅读 0赞

externals官方解释：

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

**1.优化前**

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

![优化前][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]  
这里打包以后文件明显过大，可能会造成用户体验差。

**2.优化**

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

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

在`webpack.base.conf.js`文件中配置外部扩展externals，如下：

externals: { 
       echarts: 'echarts',
      },

如下图：

![webpack配置externals][webpack_externals]  
2.2 在模板文件`index.html`文件中使用cdn引入echarts

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]  
2.3 在需要使用echarts的地方直接使用

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

![优化使用][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]

2.3 再次打包

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

![优化后][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 3]  
打包报告：

打包的时间也有缩短，只有12ms左右，  
![打包报告][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: /images/20211026/b933dd4d7819460997f0d366cfa4d32e.png
[webpack_externals]: /images/20211026/765fdfceb1c34a8fab38181249fa6f18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190820214805839.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190820173136138.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190820173619134.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190820215221347.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy,size_16,color_FFFFFF,t_70