webpack DefinePlugin 实战

webpackDefinePlugin 是经常使用的一个 plugin。它常常用来定义变量以区分环境。它的用法如下:

1
2
3
4
new webpack.DefinePlugin({
  'process.env': JSON.stringify("production"),
  debug: JSON.stringify(true)
})

一开始我以为它只是把这些变量挂在了全局变量下面,使得代码中能直接用变量,但是经过仔细查看,并不是这样的

前端网络优化总结

前端优化的本质:减少HTTP请求数量,尽可能快地载入网页

原因:浏览器对同一域下的资源,只保持一定的连接数

IE6,7 2个; IE8 6个; Firefox, Chrome 6个

Client端

  • 压缩图片
  • 制作成雪碧图(CSS Sprites)
  • 压缩合并css/js
  • 合理的标签位置(css放<head>里;js放<body>尾部,适当添加defer/async属性)
  • 文件名加上时间戳/md5
  • 结构化HTML,便于先加载关键的首屏内容
  • (可选) 极小图片base64转码放入CSS中 缺点:IE6/7不支持;IE8限制图片最大为32KB;无法缓存;体积要比原图片大;几乎无法被Gzip

Server端