React项目打包 优化详解

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

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

步骤：

1. 在项目根目录打开终端，输入打包命令：npm run build

2. 等待打包完成，打包后的内容被放在项目根下的 build 文件夹中

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

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

步骤：

1. 全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务

2. 在项目根目录中执行命令：serve -s ./build，在 build 目录中开启服务器

3. 在浏览器中访问：http://localhost:5000/ 预览项目

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

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

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

步骤：

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

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

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

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

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

5. 通过浏览器打开的页面，分析图表中的包体积

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

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

store/index.js 中：

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

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

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

步骤：

1. 在 App 组件中，导入 Suspense 组件

2. 在 Router 内部，使用 Suspense 组件包裹组件内容

3. 为 Suspense 组件提供 fallback 属性，指定 loading 占位内容

4. 导入 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 (
    
      
            loading...
          

} >

}>

) } export default App

其他的一样的

项目打包和优化-去掉console

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

 

 npm i [email protected] 

在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优化

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
    }
  }
}

public/index.html 中：

  
    
    
    
    
    
    
    
    
    
    
    <% htmlWebpackPlugin.options.cdn.css.forEach(cdnURL => { %>
      
    <% }) %>
  
  
    
    

    
    <% htmlWebpackPlugin.options.cdn.js.forEach(cdnURL => { %>
      
    <% }) %>