react打包优化和本地预览的实现

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

本文主要介绍了react打包优化和本地预览的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

项目打包

打包指的是将项目中的源代码和资源文件进行处理，生成可在生产环境中运行的静态文件的过程

打包命令

npm run build

本地预览

本地预览是指在本地通过静态服务器模拟生产服务器运行项目的过程

安装本地服务包

npm i -g serve

启动

serve -s build

浏览器访问生成的本地地址一般是3000端口

http://localhost:3000/

打包优化

路由懒加载

什么是路由懒加载？

路由懒加载是指路由的JS资源只有在被访问的时候才会动态获取，目的是为了优化项目首次打开的时间

配置路由懒加载

把路由修改为由React提供的lazy函数进行动态导入
使用React内置的Suspense组件包裹路由中element选项对应的组件

lazy函数进行动态导入

// 格式
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> ,
      },
    ],
  }
])

包体积分享

什么是包体积分析

通过可视化的方式，直观的体现项目中各种包打包之后的体积大小方便做优化

实现

安装包通过 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优化

什么是CDN？

CDN是一种内容分发网络服务，当用户请求网站内容时，有离用户最近的服务器将缓存资源内容传递给用户

哪些资源可以放到CDN服务器？

体积较大的非业务JS文件，比如react，react-dom

体积较大，需要利用CDN文件在浏览器的缓存特性，加快加载时间
非业务JS文件，不需要经常做变动，CDN不用频繁更新缓存

项目中怎么实现？

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

通过 craco 来修改 webpack 配置，从而实现 CDN 优化

craco.config.js 中：

const path = require('path')
 
module.exports = {
  webpack:{
    alias:{
      '@':path.resolve(__dirname,'src')
    },
     configure: (webpackConfig) => {
      let cdn = {
        js: [],
        css: []
      }
      // 对webpack进行配置
      whenProd(() => {
        // 只会在生产环境执行
        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>
    <!-- 动态插入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>

到此这篇关于react打包优化和本地预览的实现的文章就介绍到这了,更多相关react打包优化和本地预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

react
打包

通过实例学习React中事件节流防抖
这篇文章主要介绍了通过实例学习React中事件节流防抖，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
2019-06-06
React各种状态管理器的解读及使用方法
这篇文章主要介绍了对于React各种状态管理器的解读,文中给大家提到了状态管理器是如何使用的，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-12-12
react父组件更改props子组件无法刷新原因及解决方法
使用过vue的朋友都知道，vue父组件更改props的值，子组件是会刷新的，而react就未必，今天通过一个例子给大家介绍react父组件更改props子组件无法刷新原因,需要的朋友可以参考下
2022-09-09
解决React报错React Hook useEffect has a missing dependency
这篇文章主要为大家介绍了解决React报错React Hook useEffect has a missing dependency，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
Reactjs 错误边界优雅处理方法demo
这篇文章主要为大家介绍了Reactjs 错误边界优雅处理方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
React传递参数的几种方式
本文详细的介绍了React传递参数的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-06-06
React Native使用Modal自定义分享界面的示例代码
本篇文章主要介绍了React Native使用Modal自定义分享界面的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
在React中编写样式的六种方式
在React中,编写样式主要有以下几种方式,内联样式,外部样式表,CSS Modules,Styled Components,Emotion和Radium这六种样式,下面我将针对上面提到的6种方式给出详细的代码示例,需要的朋友可以参考下
2024-01-01
详解一个基于react+webpack的多页面应用配置
这篇文章主要介绍了详解一个基于react+webpack的多页面应用配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
react高阶组件添加和删除props
这篇文章主要介绍了react高阶组件添加和删除props，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04