java 開發(fā)手機網(wǎng)站開發(fā)莆田seo推廣公司
一、React項目打包流程
一、React項目打包流程1. 項目打包打包命令：npm run build2. 預覽接著命令行會提示執(zhí)行：
先：npm install -g serve
然后執(zhí)行此命令：serve -s build二、打包優(yōu)化 - 配置路由懶加載
二、打包優(yōu)化 - 配置路由懶加載
路由懶加載是指路由的JS資源只有在被訪問時才會動態(tài)獲取，目的是為了優(yōu)化項目首次打開的時間1. 把路由修改為由React提供的lazy函數(shù)進行動態(tài)導入
2. 使用React內(nèi)置的Suspense組件包裹路由中element選項對應的組件代碼如下所示：
// 路由配置
import { Suspense, lazy } from 'react';
import { AuthRoute } from '@/components/AuthRoute';
import { createBrowserRouter } from 'react-router-dom';// 一級路由
import Layout from '@/pages/Layout';
import Login from "@/pages/Login";// 1. lazy函數(shù)對二級路由組件進行導入
const Home = lazy(() => import('@/pages/Home'))
const Article = lazy(() => import('@/pages/Article'))
const Publish = lazy(() => import('@/pages/Publish'))// 二級路由
// import Home from '@/pages/Home';
// import Article from '@/pages/Article';
// import Publish from '@/pages/Publish';// 配置路由實例
const router = createBrowserRouter([{path: '/',// 根據(jù)權限的有無控制路由跳轉(zhuǎn)element: <AuthRoute><Layout /></AuthRoute>,children: [{path: 'home',element: <Suspense fallback="加載中"><Home /></Suspense>},{path: 'article',element: <Suspense fallback="加載中"><Article /></Suspense>},{path: 'publish',element: <Suspense fallback="加載中"><Publish /></Suspense>}]},{path: '/login',element: <Login />}
])export default router;三、打包優(yōu)化 - 包體積分析
三、打包優(yōu)化 - 包體積分析通過可視化的方式，直觀的體現(xiàn)項目中各種包打包之后的體積大小，方便做優(yōu)化1. 安裝包 --> source-map-explorernpm i source-map-explorer2. 配置命令指定要分析的js文件在package.json內(nèi)scripts添加如下代碼："analyze": "source-map-explorer 'build/static/js/*.js'""scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "craco eject","analyze": "source-map-explorer 'build/static/js/*.js'"
}四、打包優(yōu)化 - CDN優(yōu)化
四、打包優(yōu)化 - CDN優(yōu)化1. 什么是CDN？
CDN是一種內(nèi)容分發(fā)網(wǎng)絡服務，當用戶請求網(wǎng)站內(nèi)容時，由離用戶最近的服務器將緩存的資源內(nèi)容傳遞給用戶2. 哪些資源可以放到CDN服務器
體積較大的非業(yè)務JS文件，比如react、react-dom
⑴. 體積較大，需要利用CDN文件在瀏覽器的緩存特性，加快加載時間
⑵. 非業(yè)務JS文件，不需要經(jīng)常做變動，CDN不用頻繁更新緩存3. 項目中怎么做？
⑴. 把需要做CDN緩存的文件排除在打包之外（react，react-dom）
⑵. 以CDN的方式重新引入資源（react、react-dom）1. craco.config.js代碼如下:// 擴展webpack的配置
const path = require('path');
// 引入輔助函數(shù)
const {whenProd, getPlugin, pluginByName} = require('@craco/craco');module.exports = {// webpack 配置webpack: {// 配置別名alias: {// 約定：使用@表示src文件所在路徑'@': path.resolve(__dirname, 'src')},// 配置CDNconfigure: webpackConfig => {let cdn;whenProd(() => {// key: 不參與打包的包（由dependencies依賴項中的key決定）// value: cdn文件中，掛載于全局的變量名稱，為了替換之前在開發(fā)環(huán)境下webpackConfig.externals = {react: 'React','react-dom': 'ReactDOM'}// 配置現(xiàn)成的cdn資源地址// 實際開發(fā)的時候，用公司自己花錢買的cdn服務器cdn = {js: ["https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js","https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"]}});// 通過htmlWebpackPlugin插件，在public/index.html注入cdn資源urlconst {isFound, match} = getPlugin(webpackConfig, pluginByName('HtmlWebpackPlugin'));if (isFound) {// 找到了HtmlWebpackPlugin的插件match.userOptions.cdn = cdn;}return webpackConfig;}}
}2. public文件夾下index.html代碼如下：<body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><!-- 動態(tài)插入cdn資源url， 加載第三發(fā)包的 CDN 鏈接 --><% htmlWebpackPlugin.userOptions.cdn.js.forEach(cdnURL => { %><script src="<%= cdnURL %>"></script><% }) %>
</body>