前言
项目优化是我们前端开发人员必备的技能，本文以Vue项目为例，详细阐述优化的过程，看看如何使文件大小从3.19MB缩小到684KB，同时欢迎大家提出自己的优化方案。
项目技术栈阐述
本项目采用Vue前端框架、ElementUI组件库
优化之前
优化步骤
- 新建vue.config.js，添加main-dev.js、main-prod.js文件，设置不同的入口文件
利用Webpack打包的两种方式：configureWebpack和chainWebpack，他们的作用相同，唯一的区别就是他们修改webpack配置的方式不同：
①chainWebpack通过链式编程的形式，来修改默认的webpack配置
②configureWebpack通过操作对象的形式，来修改默认的webpack配置
- 使用externals加载外部CDN资源
默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。所以可以通过webpack的externals节点，来配置并加载外部的CDN资源，凡是声明在externals中的第三方依赖包，都不会被打包。
这次优化中，我把Vue、VueRouter、axios都放置到了externals中，同时项目引的第三方插件比如：echarts、nprogress等，都可以放到这里。如下：
同时，需要在public中的index.html中添加CSS和JS的引入：
-
通过CDN优化ElementUI的打包
首先在main.js中注释掉对组件的引入，无论是全局引入还是按需引入：
然后在public中的index.html中添加element的CSS和JS的引入：
-
路由懒加载
①安装@babel-plugin-syntax-dynamic-import插件
②在babel.config.js中的plugins的节点中添加’@babel-plugin-syntax-dynamic-import’
③对router.js的文件的修改
优化之后
到此，优化就结束了，大家可以看一下优化之后的结果
总结
看到这里还是十分有成就感的，从3.19MB到684KB，缩小了将近5倍，大家也快拿起自己的项目试一下吧。