打包出來具體有多大呢。weibo這種項目首次加載的js大小1.6MB以上,還不算內嵌的js。如果是單頁應用2-3M應該不是很大的問題。
成都創(chuàng)新互聯(lián)于2013年創(chuàng)立,先為番禺等服務建站,番禺等地企業(yè),進行企業(yè)商務咨詢服務。為番禺企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。
去除不必要的插件
剛開始用 webpack 的時候,開發(fā)環(huán)境和生產環(huán)境用的是同一個 webpack 配置文件,導致生產環(huán)境打包的 JS 文件包含了一大堆沒必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin... 這時候不管用什么優(yōu)化方式,都沒多大效果。所以,如果你打包后的文件非常大的話,先檢查下是不是包含了這些插件。
提取第三方庫
像 react 這個庫的核心代碼就有 627 KB,這樣和我們的源代碼放在一起打包,體積肯定會很大。所以可以在 webpack 中設置
{
entry: {
bundle: 'app'
vendor: ['react']
}
plugins: {
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
}
}
1. 將你的JS文件進行壓縮,百度一下,工具一把
2. 服務器端開啟gzip壓縮
3. 如果你是3個單獨的JS,那么你可以合成1個文件,減少請求次數(shù)
4. 將你的script標簽寫在頁面底部body標簽結束之前
5. 檢查你的js中是否存在特別耗時的邏輯,因為腳本加載時阻塞式的,它會加載完并執(zhí)行完之后,才會加載其它資源,因此慢并不一定是文件大,也可能是文件執(zhí)行花了很長時間
6. 如果還是覺得很慢,你可以使用動態(tài)加載,不要直接在頁面中寫script標簽,而是動態(tài)創(chuàng)建一個script將該腳本引進來,這樣的加載方式是非阻塞式的,不會影響其它資源加載。
7. 上面方法全用了,還是覺得很慢,那你應該檢查你的服務器和網絡情況,因為按理來說100多kb的腳本不至于慢到不可接受的地步。
8. 將頁面中的資源分散到多個一級或二級域名,因為瀏覽器對同一個域名同時加載的資源數(shù)量是有限制的
9. 如果你還是覺得很慢,那就玩些高級玩意兒吧(如使用CDN加速等)
10. 上面方法都試過,還是不奏效?那我也沒轍了,除非能現(xiàn)場分析。
我的神啊,即便是C/S應用你直接往客戶端塞2-3千條數(shù)據它也受不了啊。
Google Chrome可能不提示。但是你想過沒有,即便是你的客戶端能夠承受住上千條的數(shù)據,你的服務器呢?可能幾十人并發(fā)操作,你的服務器就爆掉了。所以建議你減小數(shù)據加載規(guī)模,牽涉到資源的問題,最好分布解決。
可以嘗試吧文件分成幾個 js,分開來玩。
我不是那么懂 js,但寫了用不了也沒用了。
或者可以試試吧不要的部分去掉,盡量減少文件大小。