本文已参与[新人创作礼]活动，一起开启掘金创作之路
项目中打包基本都是将其他分支合并到master主分支合并统一打包上线的，也有用别人写的脚本来控制打包上线，都是由其他老人处理无需我们小白操心，可以作为常识了解即可
1.项目打包和优化-项目打包
目标：
能够通过命令对项目进行打包
步骤：
-
1.在项目根目录打开终端，输入打包命令：npm run build
-
2.等待打包完成，打包后的内容被放在项目跟下的build文件夹中
2.项目打包和优化-项目本地预览
目标：
能够在本地预览打包后的项目
步骤：
-
1.全局安装本地服务包：
npm i -g serve,该包提供了serve命令，用来启动本地服务 -
2.在项目目录中执行命令：
serve -s ./build,在build目录中启动服务器 -
3.可在浏览器中访问下方两个任意一个链接预览项目
3.项目打包和优化-打包体积分析
目标：
能够分析项目打包体积
分析说明：
通过分析打包体积，才能知道项目中的哪部分内容体积较大，才能知道如何来优化
步骤：
-
1.安装分析打包体积的包：
npm i source-map-explorer之前一直用yarn下包就用yarn add source-map-explorer后面记得用yarn跑,(用npm就一直用，建议不要和yarn混用，因为有时候下包下不了，有时候也会出现一些七七怪怪包的错误) -
2.在package.json中的scripts标签中，添加分析打包体积的命令：就是利用该指令运行build/static/js文件夹下的js文件
"analyze":"source-map-explorer 'build/static/js/*.js'"
-
3.对项目打包：
npm run build -
4.运行分析命令：
npm run analyze -
5.打开浏览器分析图表中的包体积
4.项目打包和优化-生产环境优化
目标：
能够根据是否为生产环境对redux中间件进行优化
核心代码：
store/index.js中
...
let middlewares
//process：node环境下，env：环境变量，NODE_ENV：开发环境
if(process.env.NODE_ENV==='production'){
//生产环境，只启用thunk中间件，关闭调试工具
middlewares=applyMiddleware(thunk)
}else{
middlewares=composeWithDevTools(applyMiddleware(thunk))
}
const store = legacy_createStore(rootReducer,middlewares)
export default store
5.路由打包和优化路由懒加载
目标：
能够对路由进行懒加载实现代码分隔
-
在App组件中，导入Supense组件
-
在Router内部，使用Suspense组件包裹组件内容
-
为Suspense组件提供fallback属性，指定loading占位内容
-
导入lazy函数，并修改为懒加载方式导入路由组件
如此如此
这般这般
最后打包效果如下
6.项目打包和优化-去掉console
下包yarn add terser-webpack-plugin
注意webpack的版本，我这里webpack是v5可以直接下载最新的，v5之前的需要该包要下v4的版本
插件添加到webpack的配置文件中
因为我们之前使用craco自定义处理的webpack所以我们在craco.config.js对webpack进行处理
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
webpack: {
...
plugins:[
new TerserPlugin({
terserOptions:{
compress:{
drop_console:process.env.NODE_ENV==='production'
//生产环境下移除控制台所有的内容
}
}
})
]
}
}
7.CDN优化
内容分发系统简称CDN
目标：
能够对第三方包使用CDN优化
-
- 打包的时候不打包进来
-
- 在public/index.html中引入外部链接
通过 craco 来修改 webpack 配置，从而实现 CDN 优化
代码实现：
craco.config.js声明 www.bootcdn.cn/
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.userOptions.cdn = cdn
// match.options.cdn = cdn
}
return webpackConfig
}
public/index.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" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<!--
引入css的CDN
-->
<% 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>
<!--
引入js的CDN
-->
<% htmlWebpackPlugin.options.cdn.js.forEach(cdnURL => { %>
<script src="<%= cdnURL %>"></script>
<% }) %>
</body>
</html>
对比：这里我们只抽离了3个
抽离前
抽离后
