webpack教程(六)——分離組件代碼

標籤：http   pre   ges   images   class   div   解決   webpack   bpa   

先來運行一下webpack命令，

看到app.js才4k。

安裝一下react

npm install react --sava-dev

在app/index.js檔案內引入react

運行webpack

看到我們的app.js檔案竟然達到了100k。

因為app.js中包含了react的大量代碼，造成了體積增大。

如果一個使用者的網速只有1k/s，而且app.js中有載入css的過程例如還沒有把css檔案分離出去的情況，使用者要等好幾分鐘才會看到整個頁面。

這是無法忍耐的。怎麼解決呢？

在webpack.config.js中添加如下配置。

執行webpack命令。

app.js已經縮小到2k,react也分離到vendor.js中。

在瀏覽器中運行一下看看

這裡要注意了，先請求的是vendor.js，後請求的是app.js。

 

webpack教程(六)——分離組件代碼