記一次react前端專案打包優化的方法
前文
之前一年多前接手的一個react專案，前段時間因為做業務中臺專案，對公司現有的應用專案做中臺化改造，這期間將專案部署到uat環境，測試期間，測試小妹妹和產品大叔都吐槽進入uat專案的時候要load很久，白屏時間超過30s，體驗很差，生產不至於這麼慢但也是白屏時間挺長的，所以減少白屏時間增加使用者體驗成為了當務之急。複製程式碼
分析
通過控制檯判斷載入資源時間還有資源大小
通過開發者工具可以看到白屏的主要原因在於bundle.js這個打包後的檔案過大，達到3.6M加上uat環境頻寬等問題的話，光載入這個bundle.js就花了30s+，所以白屏時間太長，使用者體驗差要解決這個問題就得從這個bundle.js入手複製程式碼
通過webpack-bundle-analyzer來分析主要是哪些模組過大
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const webpackConfigDev = {
plugins: [
......
new BundleAnalyzerPlugin({ analyzerPort: 3012 }),]
}
這是本地開發時候打包的情況，沒有gzip的情況下是這麼大的，本地開發編譯打包也是挺慢的從上圖看可以分析出幾個比較大的模組，其中一個最大的是echarts，另外就是原始檔src目錄下的程式碼所以優化分為三步來走：
1.優化echarts;
2.優化src下的業務程式碼;
3.對打包後的檔案進行gzip壓縮；
優化
優化echarts
echarts在專案中用到的地方不少，但是業務平時很少用到對應的模組，整個打包進去bundle.js只會讓整個包變大思路是echarts檔案不打包進bundle.js,採用cdn的方法引入複製程式碼
優化echarts相關程式碼
1.入口檔案index.html這裡直接用script直接引入cdn的echarts檔案
<head> <meta charset="UTF-8"> <meta http-equiv="Cache-Control" content="max-age=604800" /> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script> <title>TCRM</title> </head> <body>
2.使用echarts的地方改為下面這樣引入
原先的var myChart = echarts.init(this.refs.char,'crm');
改版後 var myChart = this.$echarts.init(this.refs.char,'crm');
優化src檔案
對於使用者來說，可能每次操作的時候只操作對應的幾個模組，其他模組很少操作到，如果能夠按需載入那就可以化整為零每次載入當前模組的chunk，既不影響使用者使用，又減少載入的資源參考了一下其他文章，決定採用react-loadable進行切割劃分，按路由來切割資源複製程式碼
react-loadable相關程式碼
原先寫法，元件引入
import Dashboard from './components/Dashboard';
使用react-loadable後
import Loadable from 'react-loadable';
const LoadingFun = () => {
return <div className="center-div"><Spin spinning={true} size="large" tip="載入中..."/></div>;
};
const Dashboard = Loadable({loader: () => import('./components/Dashboard'),loading: LoadingFun});
webpack相關
const webpackConfigBase = {
......
output: {
path: resolve('./dist'),filename: 'bundle.[hash:6].js',chunkFilename: 'chunks/[name].[hash:6].js',}
}
本地執行分chunks打包
分步打包碰到的問題
1.打包樣式問題，所有的css打包到bundle.css中，但是採用按路由打包後測試的小妹妹反饋樣式很奇怪看了一下載入的資源，發現確實沒有打包到不同路由下的樣式，檢查了一下，發現是webpack配置裡面要配合改一下
const webpackConfigBase = {
......
plugins: [
// 提取css
//原先的 new ExtractTextPlugin('bundle.[hash:6].css'),new ExtractTextPlugin({filename: 'bundle.[hash:6].css',allChunks: true}),// 增加一個allChunks：true
]
}
2.chunk的名字問題，先要指定對應的chunkName參考 https://github.com/mrdulin/blog/issues/43
gzip壓縮
專案是用的nginx做代理呼叫打包後的資源，所以可以考慮在nginx這一層增加配置配合gzip檔案
新增相關配置
gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.1; gzip_comp_level 9; gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json; gzip_disable "MSIE [1-6]\."; gzip_vary on;
優化成果
echarts通過cdn引入，成功
bundle.js體積大大減小，載入時間也由原先的30s+降到了3s+,生產環境頻寬更高會更快，成功
切換路由載入對應的chunk檔案，使用正常，成功
到此這篇關於記一次react前端專案打包優化的方法的文章就介紹到這了,更多相關react前端專案打包優化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！