react项目如何打包优化

1.查看打包命令

2.运行打包命令

我的是 ` npm run build`  

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

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

步骤：

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

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

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

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

步骤：

1. 安装分析打包体积的包：npm i source-map-explorer

2. 在 package.json 中的 scripts 标签中，添加分析打包体积的命令

   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
   }

   对项目打包：npm run build（如果已经打过包，可省略这一步）

3. 运行分析命令：npm run analyze

4. 

    

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

目标：生产环境（上线了）就不需要redux调试工具

store/index.js 

 如果环境是生产环境，就只保留中间件 否则保留redux调试工具 在store里面进行逻辑判断

import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
import rootReducers from '@/store/reducers'
let middleware
// 如果环境是生产环境，就只保留中间件 否则保留redux调试工具
process.env.NODE_ENV === 'production'
  ? (middleware = applyMiddleware(thunk))
  : (middleware = composeWithDevTools(applyMiddleware(thunk)))

export default createStore(rootReducers, middleware)

 修改后需要再次重新打包

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

目标:实现路由的懒加载，引入方式采用路由懒加载

 实现步骤

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

核心代码：

一级路由 App.js

//1.引入react中路由的懒加载需要的工具
import React, { lazy, Suspense } from 'react'
//更改导入路由组件的方式
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))
//3.使用Supense对路由进行包裹 传入fallback 属性 fallback中传入加载时你需要显示的
export default function App () {
  return (
    
    <Router history={history}>
      <Switch>
        <Suspense
          fallback={
            <Spin tip="Loading...">
              <Alert
                message="加载中等着吧"
                description="我的妈勒，网慢的你妈都不认识了"
                type="info"
              />
            </Spin>
          }>
          <Redirect from="/" exact to="/login" />
          <Route path="/login" component={Login} />
          <AuthRoute path="/home" Component={Layout} />
          <Route path="/home" component={Layout} />
          <Route component={NotFound} />
        </Suspense>
      </Switch>
    </Router>
  )
}

二级路由 Layout/index：

const Home = lazy(() => import('../Home/Home.jsx'))

const Article = lazy(() => import('../Article/Article.jsx'))

const Publish = lazy(() => import('../Publish/Publish.jsx'))

 7.项目打包和优化-去掉console

1.下载去除conloso的包

npm i terser-webpack-plugin@4.2.3

2.craco.config.js配置文件配置如下代码

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

module.exports = {
  // 识别@符号的
  webpack: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  },
  // 去除console
  plugins: [
    new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: process.env.NODE_ENV === 'production'
          // 生产环境下移除控制台所有的内容
        }
      }
    })
  ]
}

8.项目打包和优化-配置CDN

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

1. 打包的时候不打包进来
2. 在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
    }
  }
}