react前端項(xiàng)目打包優(yōu)化的示例分析
小編給大家分享一下react前端項(xiàng)目打包優(yōu)化的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供朔州網(wǎng)站建設(shè)、朔州做網(wǎng)站、朔州網(wǎng)站設(shè)計(jì)、朔州網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、朔州企業(yè)網(wǎng)站模板建站服務(wù)，十載朔州做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
分析
通過控制臺(tái)判斷加載資源時(shí)間還有資源大小
通過開發(fā)者工具可以看到白屏的主要原因在于bundle.js這個(gè)打包后的文件過大，達(dá)到3.6M加上uat環(huán)境帶寬等問題的話，光加載這個(gè)bundle.js就花了30s+，所以白屏?xí)r間太長(zhǎng)，用戶體驗(yàn)差要解決這個(gè)問題就得從這個(gè)bundle.js入手復(fù)制代碼
通過webpack-bundle-analyzer來分析主要是哪些模塊過大
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const webpackConfigDev = {
plugins: [
......
new BundleAnalyzerPlugin({ analyzerPort: 3012 }),
]
}
這是本地開發(fā)時(shí)候打包的情況，沒有g(shù)zip的情況下是這么大的，本地開發(fā)編譯打包也是挺慢的從上圖看可以分析出幾個(gè)比較大的模塊，其中一個(gè)最大的是echarts，另外就是源文件src目錄下的代碼所以優(yōu)化分為三步來走：
1.優(yōu)化echarts;
2.優(yōu)化src下的業(yè)務(wù)代碼;
3.對(duì)打包后的文件進(jìn)行g(shù)zip壓縮；
優(yōu)化
優(yōu)化echarts
echarts在項(xiàng)目中用到的地方不少，但是業(yè)務(wù)平時(shí)很少用到對(duì)應(yīng)的模塊，整個(gè)打包進(jìn)去bundle.js只會(huì)讓整個(gè)包變大思路是echarts文件不打包進(jìn)bundle.js,采用cdn的方法引入復(fù)制代碼
優(yōu)化echarts相關(guān)代碼
1.入口文件index.html這里直接用script直接引入cdn的echarts文件
TCRM
2.使用echarts的地方改為下面這樣引入
原先的 var myChart = echarts.init(this.refs.char,'crm');
改版后 var myChart = this.$echarts.init(this.refs.char,'crm');
優(yōu)化src文件
對(duì)于用戶來說，可能每次操作的時(shí)候只操作對(duì)應(yīng)的幾個(gè)模塊，其他模塊很少操作到，如果能夠按需加載那就可以化整為零每次加載當(dāng)前模塊的chunk，既不影響用戶使用，又減少加載的資源參考了一下其他文章，決定采用react-loadable進(jìn)行切割劃分，按路由來切割資源復(fù)制代碼
react-loadable相關(guān)代碼
原先寫法，組件引入
import Dashboard from './components/Dashboard';
使用react-loadable后
import Loadable from 'react-loadable';
const LoadingFun = () => {
return ;
};
const Dashboard = Loadable({loader: () => import('./components/Dashboard'), loading: LoadingFun});
webpack相關(guān)
const webpackConfigBase = {
......
output: {
path: resolve('./dist'),
filename: 'bundle.[hash:6].js',
chunkFilename: 'chunks/[name].[hash:6].js',
}
}
本地運(yùn)行分chunks打包
.jpg)
分步打包碰到的問題
1.打包樣式問題，所有的css打包到bundle.css中，但是采用按路由打包后測(cè)試的小妹妹反饋樣式很奇怪看了一下加載的資源，發(fā)現(xiàn)確實(shí)沒有打包到不同路由下的樣式，檢查了一下，發(fā)現(xiàn)是webpack配置里面要配合改一下
const webpackConfigBase = {
......
plugins: [
// 提取css
//原先的 new ExtractTextPlugin('bundle.[hash:6].css'),
new ExtractTextPlugin({filename: 'bundle.[hash:6].css', allChunks: true}), // 增加一個(gè)allChunks：true
]
}2.chunk的名字問題，先要指定對(duì)應(yīng)的chunkName參考 https://github.com/mrdulin/blog/issues/43
gzip壓縮
項(xiàng)目是用的nginx做代理調(diào)用打包后的資源，所以可以考慮在nginx這一層增加配置配合gzip文件
新增相關(guān)配置
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;
優(yōu)化成果
.jpg)
echarts通過cdn引入，成功
bundle.js體積大大減小，加載時(shí)間也由原先的30s+降到了3s+,生產(chǎn)環(huán)境帶寬更高會(huì)更快，成功
切換路由加載對(duì)應(yīng)的chunk文件，使用正常，成功
看完了這篇文章，相信你對(duì)“react前端項(xiàng)目打包優(yōu)化的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
文章題目：react前端項(xiàng)目打包優(yōu)化的示例分析
標(biāo)題URL：
http://weahome.cn/article/pjogio.html
重慶分公司
重慶分公司
