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;gzip
开启也许封闭 gzip 模块，这里运用 on 示意启动
gzip_min_length
设置许可紧缩的页面最小字节数．默认值是0，不论页面多多数紧缩．
gzip_buffers
设置体系猎取几个单元的缓存用于存储gzip的紧缩结果数据流．4 16k 代表以 16k 为单元，根据原始数据大小以 16k 为单元的4倍请求内存
gzip_comp_level
紧缩比，紧缩比１最小处置惩罚速率最快，紧缩比9最大但处置惩罚最慢（传输快但比较斲丧cpu）
gzip_types
婚配MIME范例举行紧缩，（不管是不是指定）”text/html” 范例老是会被紧缩
我如许设置，把首页一个须要下载的文件由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文档中简朴看了一边，盘算今后有需求了再搞不迟．
