想到grunt glup 我脑中出现的是流水的映像
想到webpack 我脑子出现的是一个仿佛刚从哥贝克力石阵苏醒的巨人,很强大,但也很胖
看看不做任何优化 构建后的文件大小
入口平均大小400多k 不能忍啊……css也100+不能忍
在这放出来会被大家笑话成菜逼的……虽然是……
时光好像抽了我一个嘴巴,回到了当年使用maven的岁月,记得有个myeclipse的maven2插件——可以显示出当前引用jar包的依赖树
所以下一步我们要知道项目到底打包了什么依赖了什么,没有比可视化的依赖树更让人愉悦……
经过一番谷歌(坚决不百x) 终于发现能和vue-cli结合输出构建报告的三个神器
放到wepback.prod.js的plugins配置项中
然而……我是用的vue-cli,构建变成了一个独立模块build 操作
webpack.base.js webpack.prod.js进行构建 所以会用到上面的
stats-webpack-plugin
配置好插件后,运行一次构建过程,如果不加任何文件路径,那么stats.json会被输出到构建输出目录跟你的所有打包文件在一起~~
拿我这个项目来说 它有16m这么大……
感兴趣的你可以双击打开看看……
可以看到我可耻的用了sui的citypicker……当然是经过改造的……
嗯...下班 辛苦一周到家门口做个按摩再说……
有了分析工具,让我们看看需要优化的点有哪些(忽然在你脑海中出现的那些^)
下面是我的vendor包 也就是第三方模块的打包 有600k之大 绝对是个累赘
能看到我这里用的第三方库和属类
对应解决方案:
能做cdn的就直接甩cdn
能自己写的直接自己写
被浪费的要么寻找更轻量的替代、要么换其他方案、要么自己写(比如日期处理)
2016.6.14更
目前进展
未完待续...下个目标是把jquery和sm干掉～