react前端項目打包優(yōu)化的方法-創(chuàng)新互聯(lián)

今天小編給大家分享一下react前端項目打包優(yōu)化的方法的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比路橋網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式路橋網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋路橋地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。

分析

通過控制臺判斷加載資源時間還有資源大小

react前端項目打包優(yōu)化的方法

通過開發(fā)者工具可以看到白屏的主要原因在于bundle.js這個打包后的文件過大，達(dá)到3.6M加上uat環(huán)境帶寬等問題的話，光加載這個bundle.js就花了30s+，所以白屏?xí)r間太長，用戶體驗差要解決這個問題就得從這個bundle.js入手復(fù)制代碼

通過webpack-bundle-analyzer來分析主要是哪些模塊過大

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const webpackConfigDev = {
  plugins: [
    ......
    new BundleAnalyzerPlugin({ analyzerPort: 3012 }),
  ]
}

react前端項目打包優(yōu)化的方法

這是本地開發(fā)時候打包的情況，沒有g(shù)zip的情況下是這么大的，本地開發(fā)編譯打包也是挺慢的從上圖看可以分析出幾個比較大的模塊，其中一個大的是echarts，另外就是源文件src目錄下的代碼所以優(yōu)化分為三步來走：

1.優(yōu)化echarts;

2.優(yōu)化src下的業(yè)務(wù)代碼;

3.對打包后的文件進(jìn)行g(shù)zip壓縮；

優(yōu)化

優(yōu)化echarts

echarts在項目中用到的地方不少，但是業(yè)務(wù)平時很少用到對應(yīng)的模塊，整個打包進(jìn)去bundle.js只會讓整個包變大思路是echarts文件不打包進(jìn)bundle.js,采用cdn的方法引入復(fù)制代碼

優(yōu)化echarts相關(guān)代碼

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');

優(yōu)化src文件

對于用戶來說，可能每次操作的時候只操作對應(yīng)的幾個模塊，其他模塊很少操作到，如果能夠按需加載那就可以化整為零每次加載當(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 <div className="center-div"><Spin spinning={true} size="large" tip="加載中..."/></div>;
};
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',
  }  
}

本地運行分chunks打包

react前端項目打包優(yōu)化的方法 

react前端項目打包優(yōu)化的方法

 分步打包碰到的問題

1.打包樣式問題，所有的css打包到bundle.css中，但是采用按路由打包后測試的小妹妹反饋樣式很奇怪看了一下加載的資源，發(fā)現(xiàn)確實沒有打包到不同路由下的樣式，檢查了一下，發(fā)現(xiàn)是webpack配置里面要配合改一下

const webpackConfigBase = {
  ......
  plugins: [
    // 提取css
    //原先的 new ExtractTextPlugin('bundle.[hash:6].css'),
    new ExtractTextPlugin({filename: 'bundle.[hash:6].css', allChunks: true}), // 增加一個allChunks：true 
  ]
}

2.chunk的名字問題，先要指定對應(yīng)的chunkName參考 https://github.com/mrdulin/blog/issues/43

gzip壓縮

項目是用的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)化成果

react前端項目打包優(yōu)化的方法

以上就是“react前端項目打包優(yōu)化的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

當(dāng)前題目：react前端項目打包優(yōu)化的方法-創(chuàng)新互聯(lián)
文章路徑：http://muchs.cn/article14/cospge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站改版、外貿(mào)建站、品牌網(wǎng)站設(shè)計、網(wǎng)站維護(hù)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)