想到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幹掉～