记⼀次react前端项⽬打包优化的⽅法
前⽂
之前⼀年多前接⼿的⼀个react项⽬，前段时间因为做业务中台项⽬，对公司现有的应⽤项⽬做中台化改造，这期间将项⽬部署到uat环境，测试期间，测试⼩妹妹和产品⼤叔都吐槽进⼊uat项⽬的时候要load很久，⽩屏时间超过30s，体验很差，⽣产不⾄于这么慢但也是⽩屏时间挺长的，所以减少⽩屏时间增加⽤户体验成为了当务之急。复制代码
分析
通过控制台判断加载资源时间还有资源⼤⼩
通过开发者⼯具可以看到⽩屏的主要原因在于bundle.js这个打包后的⽂件过⼤，达到3.6M加上uat环境带宽等问题的话，光加载这个bundle.js就花了30s+，所以⽩屏时间太长，⽤户体验差要解决这个问题就得从这个bundle.js⼊⼿复制代码
通过webpack-bundle-analyzer来分析主要是哪些模块过⼤
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const webpackConfigDev = {
plugins: [
......
new BundleAnalyzerPlugin({ analyzerPort: 3012 }),
]
}
这是本地开发时候打包的情况，没有gzip的情况下是这么⼤的，本地开发编译打包也是挺慢的从上图看可以分析出⼏个⽐较⼤的模块，其中⼀个最⼤的是echarts，另外就是源⽂件src⽬录下的代码所以优化分为三步来⾛：
1.优化echarts;
2.优化src下的业务代码;
3.对打包后的⽂件进⾏gzip压缩；
优化
优化echarts
echarts在项⽬中⽤到的地⽅不少，但是业务平时很少⽤到对应的模块，整个打包进去bundle.js只会让整个包变⼤思路是echarts⽂件不打包进bundle.js，采⽤cdn的⽅法引⼊复制代码
优化echarts相关代码
1.⼊⼝⽂件index.html这⾥直接⽤script直接引⼊cdn的echarts⽂件
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="max-age=604800" />
<script src="cdn.bootcss/echarts/4.2.1-rc1/echarts.min.js"></script>
<title>TCRM</title>
</head>
<body>
2.使⽤echarts的地⽅改为下⾯这样引⼊
原先的var myChart = echarts.fs.char,'crm');
改版后var myChart = this.$echarts.fs.char,'crm');
优化src⽂件
对于⽤户来说，可能每次操作的时候只操作对应的⼏个模块，其他模块很少操作到，如果能够按需加载那就可以化整为零每次加载当前模块的chunk，既不影响⽤户使⽤，⼜减少加载的资源参考了⼀下其他⽂章，决定采⽤react-loadable进⾏切割划分，按路由来切割资源复制代码
react-loadable相关代码
原先写法，组件引⼊
import Dashboard from './components/Dashboard';
使⽤react-loadable后
import Loadable from 'react-loadable';
const LoadingFun = () => {
return <div className="center-div"><Spin spinning={true} size="large" tip="加载中..."/></div>;
};
const Dashboard = Loadable({loader: () => import('./components/Dashboard'), loading: LoadingFun});
webpack相关
const webpackConfigBase = {
......
output: {
path: resolve('./dist'),
filename: 'bundle.[hash:6].js',
chunkFilename: 'chunks/[name].[hash:6].js',
}
}
本地运⾏分chunks打包
分步打包碰到的问题
1.打包样式问题，所有的css打包到bundle.css中，但是采⽤按路由打包后测试的⼩妹妹反馈样式很奇
怪看了⼀下加载的资源，发现确实没有打包到不同路由下的样式，检查了⼀下，发现是webpack配置⾥⾯要配合改⼀下
const webpackConfigBase = {
......
plugins: [
// 提取css
//原先的 new ExtractTextPlugin('bundle.[hash:6].css'),
new ExtractTextPlugin({filename: 'bundle.[hash:6].css', allChunks: true}), // 增加⼀个allChunks：true
]
}
gzip压缩
项⽬是⽤的nginx做代理调⽤打包后的资源，所以可以考虑在nginx这⼀层增加配置配合gzip⽂件
新增相关配置
gzip on;
gzip_min_length 1k;nginx部署前端项目
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json; gzip_disable "MSIE [1-6]\.";
gzip_vary on;
优化成果
echarts通过cdn引⼊，成功
bundle.js体积⼤⼤减⼩，加载时间也由原先的30s+降到了3s+,⽣产环境带宽更⾼会更快，成功
切换路由加载对应的chunk⽂件，使⽤正常，成功
到此这篇关于记⼀次react前端项⽬打包优化的⽅法的⽂章就介绍到这了，更多相关react前端项⽬打包优化内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论