1.代碼壓縮(gzip)
如果你用的是nginx服務器，請修改配置文件(其他web server 類似)：sudo nano /etc/nginx/nginx.conf
在Gzip Settings里加入：
gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_comp_level 5;gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
我這樣配置，把首頁一個需要下載的文件由716KB壓縮到了246KB．優化比66%．
如果你沒有開啟服務器端的gzip，也可以開啟前后端代碼的壓縮
如果你后端用的是Express.js框架來提供Web服務，那么可以使用壓縮中間件進行gzip壓縮．
var compression = require('compression');var express = require('express');var app = express();app.use(compression());如果你前端是用vue-cli生成的項目，那么在Webpack配置文件（生產環境）中已經開啟了代碼的壓縮．
２. 外部文件按需引入||不用外部文件，自己造輪子
在項目中使用Element的話，按需引入：
首先安裝 babel-plugin-component：
npm install babel-plugin-component -D
它讓我們可以只引入需要的組件，以達到減小項目體積的目的.
PS: 如果這時報錯：
Error: post install error, please remove node_modules before retry
這是cnpm的鍋．原因不詳．解決辦法是換用npm安裝此模塊．(我試過移除node_modules文件，報錯依舊)
如果你用了Ajax相關的庫，比如vue-resource/axios的話
去掉它，自己實現一個Ajax庫吧．
比如我的項目中只涉及了get,post，那么vue-resource/axios對我來說就很沒必要了．
所以我就封裝個庫（支持Promise,不支持IE）在Vue中當作插件使用：
/* xhr.js */class XHR { get(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) { if (xhr.responseText) { resolve(JSON.parse(xhr.responseText)); } else { resolve(xhr.responseText); } } else { reject(`XHR unsuccessful:${xhr.status}`); } } }; xhr.open('get', url, true); xhr.setRequestHeader('content-type', 'application/json'); xhr.send(null); }); } post(url, data) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) { resolve(JSON.parse(xhr.responseText)); } else { reject(`XHR unsuccessful:${xhr.status}`); } } }; xhr.open('post', url, true); xhr.setRequestHeader('content-type', 'application/json'); xhr.send(JSON.stringify(data)); }); }}/* Vue插件要求提供install方法：https://cn.vuejs.org/v2/guide/plugins.html */XHR.install = (Vue) => { Vue.prototype.$get = new XHR().get; Vue.prototype.$post = new XHR().post;};export default XHR;這種方法一般能縮小文件幾十KB．比如vue-resource有35KB,我的這個xhr.js只有1.9KB．
3．代碼分塊/Code Splitting
顧名思義，就是講代碼分成塊，按需加載．這樣，如果首屏不需要的塊，就不用加載了．
對于大型項目可能更有用，因為在我的這個項目中首頁需要的文件和其他頁面需要的基本一樣，所以代碼分塊對我這個項目而言，就沒必要了．
4. 路由組件懶加載
當打包構建應用時，Javascript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了
結合 Vue 的異步組件 和 Webpack 的 code splitting feature,可以輕松實現路由組件的懶加載．
我們要做的就是把路由對應的組件定義成異步組件：
const Foo = resolve => { /* require.ensure 是 Webpack 的特殊語法，用來設置 code-split point （代碼分塊）*/ require.ensure(['./Foo.vue'], () => { resolve(require('./Foo.vue')) })}/* 另一種寫法 */const Foo = resolve => require(['./Foo.vue'], resolve);不需要改變任何路由配置，跟之前一樣使用 Foo：
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ]})4. Webpack2 Tree-shaking
Tree-shaking 用來消除沒有用到的代碼．
個人小項目一般用不到tree-shaking．因為你不會寫沒用到的代碼．規模很大的項目或許可以嘗試使用它．
5. 減少XHR中不必要的數據．
比如我的項目中，首頁只需要博客Title,id和Tags．Time和Content不需要了，況且Content一般還很大(一般一篇10KB左右)．
6. SSR(Server Side Render/服務端渲染)
這個有點難搞．但效果貌似挺不錯．我之前在Vue文檔中簡單看了一邊，打算以后有需求了再搞不遲．
7. 其他諸如圖片懶加載就不贅述了，前端開發者應該有的常識．
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
