1，尽可能的缩小webpack或者其他打包工具生成的包的大小
- 去除不必要的插件
- 去除devtool选项
- 分离CSS 安装插件：npm install extract-text-webpack-plugin --save
- 使用webpack.optimize.UglifyJsPlugin插件压缩混淆
- 提取第三方库 像 react 这个库的核心代码就有 627 KB，这样和我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置
{
entry: {
bundle: 'app'
vendor: ['react']
}
plugins: {
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
}
}
- webpack 插件列表。例如，当多个 bundle 共享一些相同的依赖，CommonsChunkPlugin 有助于提取这些依赖到共享的 bundle 中，来避免重复打包。可以像这样添加
- 按需打包
2，防抖（debounce）/节流
- 防抖：高频率事件在n秒内触发一次，如果再次触发，则重新计时
/*
* @fn：要防抖执行的函数
* @wait：防抖等待的时间
* @immediate: true 表立即执行，false 表非立即执行
*/
debounce(fn, interval) {
let timeout;
return function() {
let ctx = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(ctx, args);
}, interval);
}}
- 节流：高频率事件在n秒内触发一次，n秒内不再触发
/*
* @fn：要防抖执行的函数
* @wait：防抖等待的时间
* @immediate: true 表立即执行，false 表非立即执行
*/
throttle(fn, interval) {
let last = 0;
return function() {
let ctx = this;
let args = arguments;
let now = +new Date();
if (now - last > interval) {
last = now;
fn.apply(ctx, args);
}
}}
区别：防抖动和节流本质不一样；防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。
3、图片懒加载（当图片出现在页面中，把data-src赋值给src）
<img src="http://s4.sinaimg.cn/mw69" alt="1" data-src="http://img4.imgtn.bdimg.com/it/gp=0.jpg">
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载
4，提取组件的 CSS 到单独到文件
当使用单文件组件时，组件内的 CSS 会以 <style> 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销，将所有组件的 CSS 提取到同一个文件可以避免这个问题，也会让 CSS 更好地进行压缩和缓存
5，GZip压缩
在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量
项目开启Gzip
- npm install compression
- 配置 server.js 新加如下命令
var compression = require('compression')
var app = express();
//尽量在其他中间件前使用compression
app.use(compression());
6，使用浏览器缓存
cache-control：用于控制HTTP缓存；
Expires：指定的时间内，同样的请求都可以使用缓存。
max-age ：判断 max-age 时间，时间内请求直接从浏览器缓存中获取，时间外直接请求，可以消除Expires的限制
7，图片优化（建议使用png）
- jpg 有损压缩 压缩率高 不支持透明
- png 支持透明 浏览器兼容性好
- webp 压缩程度更好 在iOS webview有兼容性问题
- SVG 矢量图 图片样式相对简单的场景
大小比较：
通常地，PNG ≈ JPG > GIF
透明性：PNG > GIF > JPG
色彩丰富程度：JPG > PNG >GIF
兼容程度：GIF ≈ JPG > PNG
8，使用服务端渲染的方式
9、按照页面或者组件分块懒加载
10，本地储存的使用
- Cookie可以用来存储用户爱好和购买记录，用户浏览过的网站，曾经点击过的广告等信息；
- Session Storage 更适合用来存储生命周期和它同步的会话级别的信息。这些信息只适用于当前会话，当你开启新的会话时，它也需要相应的更新或释放，比如微博的 Session Storage 就主要是存储你本次会话的浏览足迹；
- Local Storage 的特点之一是持久，有时我们更倾向于用它来存储一些内容稳定的资源。比如图片内容丰富的电商网站会用它来存储 Base64 格式的图片字符串；
- IndexDB 是一个运行在浏览器上的非关系型数据库，IndexDB 可以看做是 LocalStorage 的一个升级，当数据的复杂度和规模上升到了 LocalStorage 无法解决的程度，我们毫无疑问可以请出 IndexDB 来帮忙。
网友评论