webpack 好方
想到grunt glup 我脑中出现的是流水的映像
想到webpack 我脑子出现的是一个仿佛刚从哥贝克力石阵苏醒的巨人,很强大,但也很胖
看看不做任何优化 构建后的文件大小
入口平均大小400多k 不能忍啊……css也100+不能忍
在这放出来会被大家笑话成菜逼的……虽然是……
准备优化
时光好像抽了我一个嘴巴,回到了当年使用maven的岁月,记得有个myeclipse的maven2插件——可以显示出当前引用jar包的依赖树
所以下一步我们要知道项目到底打包了什么依赖了什么,没有比可视化的依赖树更让人愉悦……
经过一番谷歌(坚决不百x) 终于发现能和vue-cli结合输出构建报告的三个神器
依赖分析工具
-
stats-webpack-plugin
这个咋用呢?配置清单如下:
var StatsPlugin = require('stats-webpack-plugin');
//....
plugins: [
new StatsPlugin('stats.json',{
chunkModules: true,
chunks:true,
assets:true,//html,css这些
modules:true,
children:true,
chunksSort:true,//排序这两个都要加上
assetsSort:true
})
]
放到wepback.prod.js的plugins配置项中
每个配置都是啥意思?
stats.json配置表
可视化呈现工具
这两个工具的原理是分析webpack提供的stats.json文件
这是webpack本身就支持输出的构建状态报告文件
如果你是按照webpack官方配置结构去构建项目的,可以使用下面的语句来输出stats.json
webpack --profile --json > stats.json
然而……我是用的vue-cli,构建变成了一个独立模块build 操作
webpack.base.js webpack.prod.js进行构建 所以会用到上面的
stats-webpack-plugin
依赖树效果
配置好插件后,运行一次构建过程,如果不加任何文件路径,那么stats.json会被输出到构建输出目录跟你的所有打包文件在一起~~
拿我这个项目来说 它有16m这么大……
感兴趣的你可以双击打开看看……
- webpack-analyse
可以看到我可耻的用了sui的citypicker……当然是经过改造的……
- webpack-chart
下一步?
嗯...下班 辛苦一周到家门口做个按摩再说……
优化准备
有了分析工具,让我们看看需要优化的点有哪些(忽然在你脑海中出现的那些^)
- 做cdn
- 图片相关优化
- 闲置型类库
先分析下报告
下面是我的vendor包 也就是第三方模块的打包 有600k之大 绝对是个累赘
能看到我这里用的第三方库和属类
- jquery 属做cdn的公共类库
- sm 属可以做cdn的公共类库 经过了定制
- sm-extend 属可以做cdn的公共类库 经过了定制
- sm-city-picker 属可以做cdn的公共类库 经过了定制
- photoswipe 图片查看器 属可以自己写
- bluebird 用的地方很少 属闲置型
- moment 提供给自己的工具库进行了一次封装 只用到了里面的几个工具函数 属闲置型
对应解决方案:
能做cdn的就直接甩cdn
能自己写的直接自己写
被浪费的要么寻找更轻量的替代、要么换其他方案、要么自己写(比如日期处理)
2016.6.14更
目前进展
未完待续...下个目标是把jquery和sm干掉～
