专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端开发React18 - 打包 react前端框架介绍

ins518 2024-09-25 22:21:36 技术文章 11 ℃ 0 评论

项目打包

步骤

  1. 在项目根目录下打开终端，输入打包命令：yarn build
  2. 等待打包完成，打包生成的内容被放在根下的build文件夹中2. 项目本地预览

项目本地预览

步骤

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

打包体积分析

步骤

  1. 安装分析打包体积的包：yarn add source-map-explorer
  2. 在 package.json 中的 scripts 标签中，添加分析打包体积的命令
  3. 对项目打包：yarn build（如果已经打过包，可省略这一步）
  4. 运行分析命令：yarn analyze
  5. 通过浏览器打开的页面，分析图表中的包体积

package.json 中：

"scripts": {

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

}

优化-配置CDN

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

craco.config.js

// 添加自定义对于webpack的配置

const path = require('path')

const { whenProd, getPlugin, pluginByName } = require('@craco/craco')

module.exports = {

// webpack 配置

webpack: {

// 配置别名

alias: {

// 约定：使用 @ 表示 src 文件所在路径

'@': path.resolve(__dirname, 'src')

},

// 配置webpack

// 配置CDN

configure: (webpackConfig) => {

// webpackConfig自动注入的webpack配置对象

// 可以在这个函数中对它进行详细的自定义配置

// 只要最后return出去就行

let cdn = {

js: [],

css: []

}

// 只有生产环境才配置

whenProd(() => {

// key:需要不参与打包的具体的包

// value: cdn文件中 挂载于全局的变量名称 为了替换之前在开发环境下

// 通过import 导入的 react / react-dom

webpackConfig.externals = {

react: 'React',

'react-dom': 'ReactDOM'

}

// 配置现成的cdn 资源数组 现在是公共为了测试

// 实际开发的时候 用公司自己花钱买的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',

],

css: []

}

})

// 都是为了将来配置 htmlWebpackPlugin插件 将来在public/index.html注入

// cdn资源数组时 准备好的一些现成的资源

const { isFound, match } = getPlugin(

webpackConfig,

pluginByName('HtmlWebpackPlugin')

)

if (isFound) {

// 找到了HtmlWebpackPlugin的插件

match.userOptions.cdn = cdn

}

return webpackConfig

}

}

}

public/index.html

<body>

<div id="root"></div>

<!-- 加载第三发包的 CDN 链接 -->

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

<script src="<%= cdnURL %>"></script>

<% }) %>

</body>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表