打包優化，我認為原則就是 將進行代碼壓縮，將一個大文件拆分為細碎的小文件。越碎越好。因為技術有限，打包優化只是進行了5個方面的優化，對於小項目來說 應該已經可以了。
1.異步加載路由。
通過 const Login = (resolve) => require(['view/login'], resolve) 方式進行路由的懶加載。雖然 const Index = () => import('@/view/index') 這種方式也能減少打包體積，但是好像效果不是很明顯
2.去掉.map文件。
Vue項目打包以后，會出現很多的已.map結尾的文件，這個文件其實主要是用來追蹤錯誤的。如果運行有問題，能提示你代碼第幾行有問題。在生產環境中很明顯這個是不需要的。
所以找到 config文件夾下的index.js.找到 productionSourceMap:true, 將 true改為 false.這樣就能減少不必要的文件。
3.第三方庫提取，同時鎖定版本號。
在原始的jq項目中，我們都知道項目優化是可以通過將一些資源庫通過cdn的方式引入到項目中。例如 jqury，bootstrap,等。Vue項目當然也是可以通過這種方式進行優化。
找到build文件夾，里面有個webpack.base.conf.js文件。在entry下面 我們可以添加一個字段 externals：{'vue': 'Vue', 'element-ui': 'ELEMENT', 'vue-router': 'VueRouter', 'axios': 'axios'}，然后在項目的根目錄下找到index.html文件，在里面加上對應的庫的CDN地址：
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
4. CSSM模塊化。將webpack.prod.conf.js中 設置css allChunks字段變為false，這一步就是將所有的css文件進行拆分。
5. 大圖片壓縮處理，使用 image-webpack-loader。具體用法自己百度一下吧。有很多。