webpack 好方

想到grunt glup 我脑中出现的是流水的映像
想到webpack 我脑子出现的是一个仿佛刚从哥贝克力石阵苏醒的巨人,很强大,但也很胖
看看不做任何优化 构建后的文件大小

Paste_Image.png

入口平均大小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-chart
• webpack-analyse

这两个工具的原理是分析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

analyse

可以看到我可耻的用了sui的citypicker……当然是经过改造的……

• webpack-chart

chart

下一步?

嗯...下班 辛苦一周到家门口做个按摩再说……

好舒服汪~

优化准备

有了分析工具,让我们看看需要优化的点有哪些(忽然在你脑海中出现的那些^)

• 做cdn
• 图片相关优化
• 闲置型类库

先分析下报告

下面是我的vendor包 也就是第三方模块的打包 有600k之大 绝对是个累赘

Paste_Image.png

能看到我这里用的第三方库和属类

• jquery 属做cdn的公共类库
• sm 属可以做cdn的公共类库 经过了定制
• sm-extend 属可以做cdn的公共类库 经过了定制
• sm-city-picker 属可以做cdn的公共类库 经过了定制
• photoswipe 图片查看器 属可以自己写
• bluebird 用的地方很少 属闲置型
• moment 提供给自己的工具库进行了一次封装 只用到了里面的几个工具函数 属闲置型

对应解决方案:
能做cdn的就直接甩cdn
能自己写的直接自己写
被浪费的要么寻找更轻量的替代、要么换其他方案、要么自己写(比如日期处理)

2016.6.14更
目前进展

Paste_Image.png

未完待续...下个目标是把jquery和sm干掉～

重要:
图片网上找的 如有侵权 马上删……
图片来源
感谢