背景
业务快速迭代，多人开发，产品换代的背后是剧增的包体和无用的代码堆积，需要盘查瘦身优化保障架构合理承受业务的迭代，并针对性的约束开发。
可视化分析
分析项目构建出来的体积大小以及里面各类包的分布, 针对性给出优化手段。
// 1. 安装依赖
npm install --save-dev webpack-bundle-analyzer
// 2. webpack项目：config.js配置
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
// 增加plugins配置
new BundleAnalyzerPlugin()
// 3. 运行命令
npm run start
运行可见项目包体分析图，分析图可见整个项目包体大小，根据面积可直观感受包体占比。
官方图如下：
常见问题
根据对包体的分析占比较大的基本有以下几种情况：
1.某一个功能性组件包体较大，例如可视化组件图表类，编辑器等。
2.引入多个相同功能性组件或者引入了没有使用到的惨不忍睹的情况，多人开发且无人把控开发流程时容易出现这个问题，亦或者中途修改策略同时并存。
3.引入的依赖包中的依赖与自身依赖版本不同，导致有多个。常见的lodash
4.包体引用的非支持esm版本。
5.大材小用，为了一条猪尾巴杀了一头猪的现象。
对症下药
1. 删除无用的代码和无用的依赖包
（不需要解释，删的时候小心些）
2. 合并依赖包
（1）针对引入了多个相同功能性的组件需要结合业务确定某一个是否可以满足业务要求，如果可以进行统一，并且要求后续沿用。
（2）多版本配置resolutions统一版本号处理。
"resolutions": {
"lodash": "^4.17.15"
},
3. 寻找替代品
例如：momentjs替代品dayjs
例如：原要求的编辑器引入的monaco（约6M大），后续发现只用到了展示功能，react-json-view完全可以满足需求，避免大材小用。
4. 外部引入
配置externals引入全局使用的包，一般对应的官网有引入script以及引入名。
externals: {
"react": "React",
"react-dom": "ReactDOM",
},
5. 按需加载
重点： import(/* webpackChunkName: "react-json-view" */'react-json-view')
其中webpackChunkName为打包名称
（1） react-loadable
1
const ReactJson = Loadable({
2
// 所加载的目标模块
3
loader: () => import(/* webpackChunkName: "react-json-view" */'react-json-view'),
4
// 模块未加载完成时的占位组件
5
loading: () => 'loading...',
6
})
7
export default (props) => {
8
return <ReactJson {...props} />
9
}
10
（2）React.lazy
zh-hans.reactjs.org/docs/code-s…
1
import React, { Suspense } from 'react';
2
3
const OtherComponent = React.lazy(() => import('./OtherComponent'));
4
5
function MyComponent() {
6
return (
7
8
<Suspense fallback={
9
10
11
12
13
14
);
15
}
6. 确定有没有采用压缩开启压缩
大部分框架内置了压缩配置，但是也是一个检查项
7. 分包策略 splitChunks
webpack.docschina.org/plugins/spl…
项目分包常规策略：
基础类库：react，react-redux，react-router
UI库：antd，antd-icons，fusion
公共组件库：自定义的公共组件
低频组件
业务代码
范例：
1
optimization: {
2
splitChunks: {
3
chunks: 'all',
4
cacheGroups: {
5
defaultVendors: {
6
test: /[\/]node_modules[\/]/,
7
priority: -10,
8
reuseExistingChunk: true,
9
},
10
default: {
11
minChunks: 2,
12
priority: -20,
13
reuseExistingChunk: true,
14
},
15
},
16
},
17
}
