React项目打包优化详解

2024-02-16 21:32:28

项目打包和优化-项目打包

目标：能够通过命令对项目进行打包

步骤：

在项目根目录打开终端，输入打包命令：npm run build
等待打包完成，打包后的内容被放在项目根下的 build 文件夹中

项目打包和优化-项目本地预览

目标：能够在本地预览打包后的项目

步骤：

全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务
在项目根目录中执行命令：serve -s ./build，在 build 目录中开启服务器
在浏览器中访问：http://localhost:5000/ 预览项目

项目打包和优化-打包体积分析

目标：能够分析项目打包体积

分析说明：通过分析打包体积，才能知道项目中的哪部分内容体积过大，才能知道如何来优化

步骤：

安装分析打包体积的包：npm i source-map-explorer
在 package.json 中的 scripts 标签中，添加分析打包体积的命令
```
"scripts": {
  "analyze": "source-map-explorer 'build/static/js/*.js'",
}
```
对项目打包：npm run build（如果已经打过包，可省略这一步）
运行分析命令：npm run analyze
通过浏览器打开的页面，分析图表中的包体积

项目打包和优化-生产环境优化

目标：能够根据是否为生产环境对redux中间件进行优化 核心代码：

store/index.js 中：

let middlewares

if (process.env.NODE_ENV === 'production') {
  // 生产环境，只启用 thunk 中间件
  middlewares = applyMiddleware(thunk)
} else {
  middlewares = composeWithDevTools(applyMiddleware(thunk))
}

项目打包和优化-路由懒加载

目标：能够对路由进行懒加载实现代码分隔

步骤：

在 App 组件中，导入 Suspense 组件
在 Router 内部，使用 Suspense 组件包裹组件内容
为 Suspense 组件提供 fallback 属性，指定 loading 占位内容
导入 lazy 函数，并修改为懒加载方式导入路由组件

核心代码：

App.js 中：

import { lazy, Suspense } from 'react'

//之前
//import Login from '@/pages/Login/Login.jsx'
//import NotFound from './pages/NotFound/NotFound.jsx'
// 导入页面组件 现在
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))

const App = () => {
  return (
    <Router history={history}>
      <Suspense
        fallback={
          <div
            style={{
              textAlign: 'center',
              marginTop: 200
            }}
          >
            loading...
          </div>
        }
      >
        <div className="app">
          <Route exact path="/" render={() => <Redirect to="/home" />}></Route>
          <Route path="/login" component={Login}></Route>
          <AuthRoute path="/home" component={Layout}></AuthRoute>
        </div>
      </Suspense>
    </Router>
  )
}

export default App

其他的一样的

项目打包和优化-去掉console

在下载之前最好看一下自己下的webpack版本号在node_modules中查找webpack文件夹在package.json中version标识的便是版本号你下载的包版本最好不要超过这个版本

 npm i terser-webpack-plugin@4.2.3

在craco.config.js文件中配置

const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  webpack: {
    // 省略其他...
		plugins: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: process.env.NODE_ENV === 'production' 
            // 生产环境下移除控制台所有的内容
          }
        }
      })
    ]
  }
}

项目打包和优化-配置CDN

目标：能够对第三方包使用CDN优化

打包的时候不打包进来
在public/index.html中引入外部链接

分析说明：通过 craco 来修改 webpack 配置，从而实现 CDN 优化

核心代码：

craco.config.js 中：

const path = require('path')
// HtmlWebpackPlugin
const { whenProd, getPlugin, pluginByName } = require('@craco/craco')
module.exports = {
  webpack: {
    alias: {
      '@': path.join(__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" />
    <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" />
    <!--
      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" />
    <!--
      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>
    <% htmlWebpackPlugin.options.cdn.css.forEach(cdnURL => { %>
      <link rel="stylesheet" href="<%= cdnURL %>"></link>
    <% }) %>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      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`.
    -->
    <% htmlWebpackPlugin.options.cdn.js.forEach(cdnURL => { %>
      <script src="<%= cdnURL %>"></script>
    <% }) %>
  </body>
</html>

码农公寓