美文网首页
模块懒加载

模块懒加载

作者: 2林子易2 | 来源:发表于2021-03-24 11:43 被阅读0次

    痛点

    首屏加载缓慢,目前的体积包过于庞大

    解决思路

    1. 通过webpack-bundle-analyzer进行体积分析,将目前的bundle进行拆包
    2. main包过大,需路由懒加载
    3. 公共包过大,需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

    使用方式

    1. react-loadable example
    2. customizing-rendering
    3. 编写自定义webpack loader,通过解析每个模块导出页面的index.js文件,转换为lazy导出方式

    补充知识点

    1. webpack的执行流程
    2. 如何编写一个loader

    涉及修改内容

    1. 需规范我们的页面导出方式
    2. 配置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使用方式基本一致

    涉及修改内容

    1. web页面导出需修改导出方式
    2. 该种导出方式和react native不兼容

    bundle-loader

    使用方式

    1. 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';
    
    1. 提供支持懒加载包裹的组件,如下:
    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;
      }
    }
    
    1. 修改路由声明
    <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使用基本一致

    涉及修改内容

    1. 页面导出在路由文件中按文件路径进行引用
    2. webpack需配置懒加载的文件项
    3. cp库支持懒加载路由

    后续的思考

    1. webpack可以生成打包分析的json文件,依据此可以后续进行web包体积监控
      基本思路:
      检查package.json是否改动来检查包体积是否有较大变动
    2. 随着npm ci下载依赖的加速,可以考虑将同步的web打包,ios打包,android打包分离

    后续优化的点

    1. node_modules包还可以继续缩减体积,主要在于lodash,URI等体积比较大的包
    2. main包可以继续进行图片拆离研究,进一步缩小体积

    相关文章

      网友评论

          本文标题:模块懒加载

          本文链接:https://www.haomeiwen.com/subject/kryfhltx.html