快捷導(dǎo)航

記一次react前端項(xiàng)目打包優(yōu)化的方法

更新時(shí)間：2020年03月30日 10:34:44 作者：李奕遜

這篇文章主要介紹了記一次react前端項(xiàng)目打包優(yōu)化的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前文

之前一年多前接手的一個(gè)react項(xiàng)目，前段時(shí)間因?yàn)樽鰳I(yè)務(wù)中臺(tái)項(xiàng)目，對(duì)公司現(xiàn)有的應(yīng)用項(xiàng)目做中臺(tái)化改造，這期間將項(xiàng)目部署到uat環(huán)境，測(cè)試期間，測(cè)試小妹妹和產(chǎn)品大叔都吐槽進(jìn)入uat項(xiàng)目的時(shí)候要load很久，白屏?xí)r間超過(guò)30s，體驗(yàn)很差，生產(chǎn)不至于這么慢但也是白屏?xí)r間挺長(zhǎng)的，所以減少白屏?xí)r間增加用戶體驗(yàn)成為了當(dāng)務(wù)之急。復(fù)制代碼

分析

通過(guò)控制臺(tái)判斷加載資源時(shí)間還有資源大小

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

通過(guò)webpack-bundle-analyzer來(lái)分析主要是哪些模塊過(guò)大

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

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

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文件

<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文件

對(duì)于用戶來(lái)說(shuō)，可能每次操作的時(shí)候只操作對(duì)應(yīng)的幾個(gè)模塊，其他模塊很少操作到，如果能夠按需加載那就可以化整為零每次加載當(dāng)前模塊的chunk，既不影響用戶使用，又減少加載的資源參考了一下其他文章，決定采用react-loadable進(jìn)行切割劃分，按路由來(lái)切割資源復(fù)制代碼

react-loadable相關(guān)代碼

原先寫(xiě)法，組件引入

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',
  }  
}

本地運(yùn)行分chunks打包

分步打包碰到的問(wèn)題

1.打包樣式問(wèn)題，所有的css打包到bundle.css中，但是采用按路由打包后測(cè)試的小妹妹反饋樣式很奇怪看了一下加載的資源，發(fā)現(xiàn)確實(shí)沒(méi)有打包到不同路由下的樣式，檢查了一下，發(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的名字問(wèn)題，先要指定對(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)化成果

echarts通過(guò)cdn引入，成功
bundle.js體積大大減小，加載時(shí)間也由原先的30s+降到了3s+,生產(chǎn)環(huán)境帶寬更高會(huì)更快，成功
切換路由加載對(duì)應(yīng)的chunk文件，使用正常，成功

到此這篇關(guān)于記一次react前端項(xiàng)目打包優(yōu)化的方法的文章就介紹到這了,更多相關(guān)react前端項(xiàng)目打包優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: