前言
create-react-app
提供了很方便的創建 React 應用途徑。它已經把 webpack, Babel, Autoprefixer, ESLint, Jest 等常用工具打包進去。可以說是一個非常方便,好用的製造 React 應用工具。當我打算把包裝好的檔案推上去的時候,我卻發現打包之後的檔案大小有點大,因此我就開始優化這個網頁應用了。第一點我優化的地方就是 Source Map。
如果你細心看 README.md 的話,你會發現下面這一句,它把 Source Map 也打包進去。。。
A build script to bundle JS, CSS, and images for production, with sourcemaps.
在測試環境中,我們可以透過 sourcemap 找到 bundle 過後的對應項目組件,這個是蠻方便的。
但是,在生產環境中,如果有 sourcemap 的話,就會直接暴露項目中的架構,以及檔案,同時會增加網站大小。。。
解決方法
快速方法
排除 *.map
,避免部署 sourcemap 到上面。。。
這個方法並不能從根源解決問題,因為產生 sourcemap 需時較長,另外,也會產生一個不需要的檔案大小略大的 sourcemap 檔案。
徹底方法
npm run eject
,如果你沒有 Eject 過的話。
Eject 是一個特殊命令,把 create-react-app
的懶人包變成自定義的項目。在 Eject 之前,請想清楚你是否需要掌握項目的每一個細節。
對應日新月異的產品需求以及開發需求,我選擇 Eject。比如說 SCSS,CSS 模組化。
用你喜歡的文字編輯器 或 IDE 打開
/config/webpack.config.prod.js
刪除或注釋第五十三行
devtool: 'source-map'
在上面你可以看到這樣的注釋:
// We generate sourcemaps in production. This is slow but gives good results.
// You can exclude the *.map files from the build during deployment.
它這裡寫就是說產生 sourcemap 會給出好的結果,雖然產生時間會更加長。。。
另外,你可以排除 *.map
,避免部署 Source Map 到上面。。。