Vue项目优化：从3.19MB到684KB的优化之路

前言

项目优化是我们前端开发人员必备的技能，本文以Vue项目为例，详细阐述优化的过程，看看如何使文件大小从3.19MB缩小到684KB，同时欢迎大家提出自己的优化方案。

---

项目技术栈阐述

本项目采用Vue前端框架、ElementUI组件库

---

优化之前

---

优化步骤

1.新建vue.config.js，添加main-dev.js、main-prod.js文件，设置不同的入口文件

利用Webpack打包的两种方式：configureWebpack和chainWebpack，他们的作用相同，唯一的区别就是他们修改webpack配置的方式不同：

①chainWebpack通过链式编程的形式，来修改默认的webpack配置
②configureWebpack通过操作对象的形式，来修改默认的webpack配置

2.使用externals加载外部CDN资源

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。所以可以通过webpack的externals节点，来配置并加载外部的CDN资源，凡是声明在externals中的第三方依赖包，都不会被打包。

这次优化中，我把Vue、VueRouter、axios都放置到了externals中，同时项目引的第三方插件比如：echarts、nprogress等，都可以放到这里。如下：

同时，需要在public中的index.html中添加CSS和JS的引入：

3.通过CDN优化ElementUI的打包

首先在main.js中注释掉对组件的引入，无论是全局引入还是按需引入：

然后在public中的index.html中添加element的CSS和JS的引入：

4.路由懒加载

①安装@babel-plugin-syntax-dynamic-import插件
②在babel.config.js中的plugins的节点中添加’@babel-plugin-syntax-dynamic-import’

③对router.js的文件的修改

这里可以参考官方文档：路由懒加载

---

优化之后

到此，优化就结束了，大家可以看一下优化之后的结果：

---

总结

看到这里还是十分有成就感的，从3.19MB到684KB，缩小了将近5倍，大家也快拿起自己的项目试一下吧。