React — 打包最佳化

萬事順意發表於2024-03-14
React

1.路由懶載入：

（1）說明

路由懶載入是指路由的JS資源只有在被訪問的時候才會被動態獲取，是為了最佳化專案首次開啟的時間。

（2）配置

  • 把路由修改為由React提供的lazy函式進行動態匯入
import {Suspense, lazy} from 'react'

//lazy函式對元件進行匯入
const Board = lazy(()=>import('@/page/Board'))
const About = lazy(()=>import('@/page/About'))
  • 使用React內建的Suspense元件包裹路由中的element選項對應的元件
const router = createBrowserRouter([
    {
        path : '/',
        element : <Layout></Layout>,
        children :[{
            index:true,
            element : <Suspense fallback={'load'}><Board></Board></Suspense>
        },
        {
            path : '/about',
            element : <Suspense fallback={'load'}><About></About></Suspense>
        }]
    },
])

2.包體積視覺化分析

（1）下載依賴包

npm i source-map-explorer

（2）配置命令 package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "analyze" : "source-map-explorer 'build/static/js/*.js'"
  },

3.CDN最佳化

（1）說明：CDN是一種內容分發網路服務，當使用者請求網站內容時，由離使用者最近的伺服器將快取的資源內容傳遞給使用者

（2）哪些資源可以放到CDN伺服器?

  • 體積比較大的非業務JS 檔案，比如react、react-dom，需要利用CDN檔案在瀏覽器的快取特性，加快載入時間
  • 非業務JS,不需要經常做變動，CDN不用頻繁更新

（3）最佳化操作

  • 把需要做CDN快取的檔案排除在打包之外
  • 以CDN的方式重新引入資源
const path = require('path')
const {whenProd,getPlugin,pluginByName} = require('@craco/craco')
// const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    webpack : {
        alias : { //別名配置
            '@' : path.resolve(__dirname,'src')
        }
    },
    //配置webpack
    configure : (webpackConfig)=>{
        let cdn;
        whenProd(()=>{
            webpackConfig.externals = {
                react : 'React',
                'react-dom' : 'ReactDOM'
            }
            cdn = {
                js : [
                    'https://unpkg.com/react@latest/umd/react.development.js',
                    'https://unpkg.com/react-dom@latest/umd/react-dom.development.js'
                ]
            }
        })
        const {isFound,match} = getPlugin(
            webpackConfig,
            pluginByName('HtmlWebpackPlugin')
        )

        if(isFound) {
            match.userOptions.cdn = cdn
        }


        return webpackConfig
    }
}

相關文章