痛点
首屏加载缓慢，目前的体积包过于庞大
解决思路
- 通过webpack-bundle-analyzer进行体积分析，将目前的bundle进行拆包
- main包过大，需路由懒加载
- 公共包过大，需module懒加载
方式
经过查看，目前市面上懒加载使用的工具有如下：
- require.ensure
- import()
- lazyload-loader
- react.lazy
- bundle-loader
- react-loadable
传送门
webpack异步加载的原理
Webpack实现路由懒加载的三种方式
基于webpack4+react 的js懒加载
webpack v3 结合 react-router v4 做 dynamic import — 按需加载（懒加载）
react-loadable路由懒加载
方案：react-loadable+loader
使用方式
- react-loadable example
- customizing-rendering
- 编写自定义webpack loader，通过解析每个模块导出页面的index.js文件，转换为lazy导出方式
补充知识点
涉及修改内容
- 需规范我们的页面导出方式
- 配置webpack loader
其他方案
lazy
使用方式
修改页面类导出的方式
之前:
export {ProductDetail as ProductDetail} from './detail/product-detail';
之后:
const LazyProductDetail = lazy(() => import('./detail/product-detail').then(mod => mod.ProductDetail));
class ProductDetail extends Component {
render() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyProductDetail {...this.props}/>
</Suspense>
</div>
);
}
}
export {
ProductDetail
};
PS: 此外，react-loadable和react lazy使用方式基本一致
涉及修改内容
- web页面导出需修改导出方式
- 该种导出方式和react native不兼容
bundle-loader
使用方式
- webpack修改配置，loader增加bundle-loader
module.exports = {
module: {
rules: [
{
test: /\.bundle\.js$/,
use: 'bundle-loader'
}
]
}
}
本质上是将匹配的文件包裹require.ensure, 代码如下：
if(query.lazy) {
result = [
"module.exports = function(cb) {\n",
" require.ensure([], function(require) {\n",
" cb(require(", loaderUtils.stringifyRequest(this, "!!" + remainingRequest), "));\n",
" }" + chunkNameParam + ");\n",
"}"];
}
此时，已不支持如下导出方式
export {ProductDetail as ProductDetail} from './detail/product-detail';
- 提供支持懒加载包裹的组件，如下:
class Bundle extends React.Component {
constructor(props){
super(props);
this.state = {
// 默认为空
mod: null
}
console.log("xxxxxx", props.load);
}
componentWillMount() {
// 加载初始状态
this.load(this.props);
}
componentWillReceiveProps(nextProps) {
if (nextProps.load !== this.props.load) {
this.load(nextProps);
}
}
load(props) {
// 重置状态
this.setState({
mod: null
});
// 传入组件的组件
props.load((mod) => {
this.setState({
mod: mod.default ? mod.default : mod
});
});
}
render() {
// 不为空，则渲染传入的子组件函数
return this.state.mod ? this.props.children(this.state.mod) : null;
}
}
- 修改路由声明
<Route key={config.path} path={config.path} render={(props) => {
return <Bundle load={config.component}>
{
Comp => {
if (Comp) {
let C = Inject(Comp, config.options);
return <C {...props} {...parentState.query} title={config.options.title}/>
} else {
return <div>Loading...</div>
}
}
}
</Bundle>
}}exact/>
PS: 此外，require.ensure、import()和bundle-loader使用基本一致
涉及修改内容
- 页面导出在路由文件中按文件路径进行引用
- webpack需配置懒加载的文件项
- cp库支持懒加载路由
后续的思考
- webpack可以生成打包分析的json文件，依据此可以后续进行web包体积监控
基本思路：
检查package.json是否改动来检查包体积是否有较大变动 - 随着npm ci下载依赖的加速，可以考虑将同步的web打包，ios打包，android打包分离
后续优化的点
- node_modules包还可以继续缩减体积，主要在于lodash，URI等体积比较大的包
- main包可以继续进行图片拆离研究，进一步缩小体积
