记得一次vue-webpack项目优化实践的详细讲解

项目状态

项目为数据监控平台，引入ehcart和three.js负责项目的数据可视化；打包后，体积高达2.1M，与我的项目规模相比略显笨重

使用webpack-bundle-analyzer分析每个文件的比例：

整个项目的文件分布大体清晰，现在开始优化走！

优化思路

按照wba的说法，第三方插件是一个大插件，包括三个. js echart组件和elementUI组件。Three.js几乎没有优化空间，主要集中在另外两个方面。

展示

根据我的项目要求，echart主要使用折线图，其他图表不需要。在开发过程中，我引用了整个echart，其实没有必要。

Ehcart全局参考方法

从(' e charts') vue.prototype导入e charts，$ e charts=e charts更改为：

从' echart/lib/echart . js ' import ' echart/lib/chart/line ' import ' echart/lib/component/tooltip ' import ' echart/lib/component/title ' import ' echart/lib/component/legendScroll ' import ' echart/lib/component/dataZoom ' vue . prototype . $ echart=echart

elementUI

和echart一样，elementUI也是根据需要导入的，取代了之前的整个介绍。ElementUI需要根据需要安装babel-plugin-component包，并在babelrc文件中进行如下修改：

由“插件”:优化[.['组件'，{ '库名' : '元素-ui '，' stylelibraryname' : '主题-粉笔' }]:

优化第三方插件后，打包文件减少了近30%。

到目前为止，三. js是打包项目中最重要的部分，目前优化空间较小。然而，echart转型给包装量带来的好处仍然显而易见。

附言

这个优化比较简单，主要是通过自己项目的优化，熟悉webpack-bundle-analyzer的操作以及使用这个插件优化webpack打包文件的方法和思路；这是一个简单的做法。让我们记录下来。当然，从整体优化的大维度来看，还有很多优化点，本文继续更新。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。