快捷導(dǎo)航

react打包優(yōu)化和本地預(yù)覽的實現(xiàn)

更新時間：2025年07月04日 08:59:15 作者：前端小趴菜05

本文主要介紹了react打包優(yōu)化和本地預(yù)覽的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

項目打包

打包指的是將項目中的源代碼和資源文件進行處理，生成可在生產(chǎn)環(huán)境中運行的靜態(tài)文件的過程

打包命令

npm run build

本地預(yù)覽

本地預(yù)覽是指在本地通過靜態(tài)服務(wù)器模擬生產(chǎn)服務(wù)器運行項目的過程

安裝本地服務(wù)包

npm i -g serve

啟動

serve -s build

瀏覽器訪問生成的本地地址一般是3000端口

http://localhost:3000/

打包優(yōu)化

路由懶加載

什么是路由懶加載？

路由懶加載是指路由的JS資源只有在被訪問的時候才會動態(tài)獲取，目的是為了優(yōu)化項目首次打開的時間

配置路由懶加載

把路由修改為由React提供的lazy函數(shù)進行動態(tài)導(dǎo)入
使用React內(nèi)置的Suspense組件包裹路由中element選項對應(yīng)的組件

lazy函數(shù)進行動態(tài)導(dǎo)入

// 格式
const 命名 = lazy(()=>import('路徑'))

const Month = lazy(()=>import('@/page/Month/index'))

Suspense組件包裹路由組件

const router = createBrowserRouter([
  {
    path: "/",
    element: <Suspense> <Layout/></Suspense>,
    children: [
      {
        path: "/year",
        element:<Suspense><Year/></Suspense>,
      },
      {
        
        index:true,
        element: <Suspense><Month/></Suspense> ,
      },
    ],
  }
])

包體積分享

什么是包體積分析

通過可視化的方式，直觀的體現(xiàn)項目中各種包打包之后的體積大小方便做優(yōu)化

實現(xiàn)

安裝包通過 source-map-explorer
配置命令指定要分析的js文件

安裝

npm i source-map-explorer

配置命令指定要分析的js文件

 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "server": "json-server ./mock/home.json --port 3005",
    "explorer": "source-map-explorer 'build/static/js/*.js'"  //分析命令
  },

運行命令

npm run explorer

運行成功會自動在瀏覽器打開分析圖

CDN優(yōu)化

什么是CDN？

CDN是一種內(nèi)容分發(fā)網(wǎng)絡(luò)服務(wù)，當(dāng)用戶請求網(wǎng)站內(nèi)容時，有離用戶最近的服務(wù)器將緩存資源內(nèi)容傳遞給用戶

哪些資源可以放到CDN服務(wù)器？

體積較大的非業(yè)務(wù)JS文件，比如react，react-dom

體積較大，需要利用CDN文件在瀏覽器的緩存特性，加快加載時間
非業(yè)務(wù)JS文件，不需要經(jīng)常做變動，CDN不用頻繁更新緩存

項目中怎么實現(xiàn) ？

把需要做CDN緩存的文件排除在打包之外(react，react-dom）
以CDN的方式重新引入資源(react，react-dom）

通過 craco 來修改 webpack 配置，從而實現(xiàn) CDN 優(yōu)化

craco.config.js 中：

const path = require('path')
 
module.exports = {
  webpack:{
    alias:{
      '@':path.resolve(__dirname,'src')
    },
     configure: (webpackConfig) => {
      let cdn = {
        js: [],
        css: []
      }
      // 對webpack進行配置
      whenProd(() => {
        // 只會在生產(chǎn)環(huán)境執(zhí)行
        webpackConfig.externals = {
          react: 'React',
          'react-dom': 'ReactDOM',
          redux: 'Redux',
        }
 
        cdn = {
          js: [
            'https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js',
            'https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js',
            'https://cdn.bootcdn.net/ajax/libs/redux/4.1.0/redux.min.js'
          ],
          css: []
        }
      })
 
      const { isFound, match } = getPlugin(
        webpackConfig,
        pluginByName('HtmlWebpackPlugin')
      )
      if (isFound) {
        // 找到了html的插件
        match.options.cdn = cdn
      }
 
      return webpackConfig
    }
  }
}

public/index.html 中：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" rel="external nofollow"  />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" rel="external nofollow"  />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="external nofollow"  />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!-- 動態(tài)插入cdn資源 -->
     <% htmlWebpackPlugin.options.cdn.css.forEach(cdnURL => { %>
      <link rel="stylesheet" href="<%= cdnURL %>" rel="external nofollow" ></link>
    <% }) %>

    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

到此這篇關(guān)于react打包優(yōu)化和本地預(yù)覽的實現(xiàn)的文章就介紹到這了,更多相關(guān)react打包優(yōu)化和本地預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: