前言
項目優化是我們前端開發人員必備的技能，本文以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倍，大家也快拿起自己的項目試一下吧。
