[TOC] ## 前言 本文就**vue項目中webpack打包配置（vue-cli構建的項目）下首頁加載**可以進行的一些優化進行探索，參考文檔來源于各個公眾號以及個人總結，希望能在工作中切實的幫到大家提升應用體驗。 ## 使用cdn資源 我們基本在項目中會使用一些第三方的ui庫或者資源文件，這些在vendor.js中大約占據788k在沒有引入其他資源的時候，如果在加入其他的大概會占據1M,這些資源我們可以通過cdn加載的方式請求。國內的CDN服務推薦使用 [BootCDN](https://link.juejin.im/?target=http%3A%2F%2Fwww.bootcdn.cn%2F) 1 index.html中加入cdn引用 ~~~ <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css"> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script> ~~~ 2 修改 build/webpack.base.conf.js。關于 externals 配置項請自行查閱相關資料。 ~~~ externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT' } ~~~ 3 其他修改 src/router/index.js，src/store/index.js，src/main.js，將引入模塊的部分注釋 4 重新運行之后發現文件變小，同時cdn資源加載明顯優化。 5 這樣修改以后，vue的開發工具就不能用了，這時候建議吧externals的配置項單獨放到dev以及prod中，兩者采用不同的配置文件。 **備注：以上的方案基于請求代價大于下載代價，如果不是這個前提的請謹慎考慮** ## nginx開啟gizp（必備） vim打開nginx的配置文件，打開編輯器，找到下面對應的代碼段。 vim /usr/local/nginx/conf/nginx.conf ~~~ gzip on; gzip_min_length 1k; gzip_buffers 4 16k; #gzip_http_version 1.0; gzip_comp_level 2; gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary off; gzip_disable "MSIE [1-6]\." ~~~ 解釋如下：第一次需要關注下，之后直接復制粘貼即可。 第1行：開啟Gzip 第2行：不壓縮臨界值，大于1K的才壓縮，一般不用改 第3行：buffer，就是，嗯，算了不解釋了，不用改 第4行：用了反向代理的話，末端通信是HTTP/1.0，有需求的應該也不用看我這科普文了；有這句的話注釋了就行了，默認是HTTP/1.1 第5行：壓縮級別，1-10，數字越大壓縮的越好，時間也越長，看心情隨便改吧 第6行：進行壓縮的文件類型，缺啥補啥就行了，JavaScript有兩種寫法，最好都寫上吧，總有人抱怨js文件沒有壓縮，其實多寫一種格式就行了 第7行：跟Squid等緩存服務有關，on的話會在Header里增加"Vary: Accept-Encoding"，我不需要這玩意，自己對照情況看著辦吧 第8行：IE6對Gzip不怎么友好，不給它Gzip了 ## vue路由懶加載 ## 異步組件 * 首先把路由組件改裝為異步組件，參考[異步組件官方文檔](https://cn.vuejs.org/v2/guide/components.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6) ~~~ // src/router/index.js export default new VueRouter({ routes: [ { path: '/', name: 'HelloWorld', component: resolve => require(['@/components/HelloWorld'], resolve) } ] }) ~~~ ## webpack DllPlugin webpack提供了一個插件 DllPlugin ，用于將不常變動的js單獨打包。具體的設置文檔參考掘金的分享：[常用js架包單獨打包的配置使用](https://juejin.im/post/5a3251ee6fb9a0450f21f6ac?utm_medium=fe&utm_source=weixinqun) ## 服務端渲染 將需要做的渲染工作在服務端完成，直接返回給瀏覽器。 ## 按需引入組件 單獨頁面中需要的組件自行引入即可，不要在公共的main中全量引入。 ## 參考資料 * [掘金單頁優化分享](https://juejin.im/post/5a291092518825293b50366d)