记一次基于react项目的一次优化

按需加载

随着生产项目的持续功能迭代，前端代码体积会不断增加，导致加载时间越来越长。

其实我们看build出来的文件就不难看出其实他把我们的所编写的代码模块大部分都打包到一个文件中

为了减少加载时间，我们可以拆分代码，把不同的页面打包出单独的js文件 在我们需要当前资源时再去请求当前的静态资源

比如 之前我们进入首页时需要把所有页面的静态资源全部完成家在 按需加载 拆分后我只需要加在当前页面所需要的部分代码 静态资源体积变小加载必然也会更快

React动态import()

create-react-app 的配置中import()是没有办法直接使用的 这里我们需要配置一下bable

cnpm i babel-plugin-syntax-dynamic-import -D

babel-plugin-syntax-dynamic-import是babel支持webpack的import()插件。

配置方法 在.bablere 或者 bable-loader 的plugins添加

{ 
    plugins: ["@babel/plugin-syntax-dynamic-import"] 
} 

import React from 'react';
export default function lazyLoad(componentfn) {
    class LazyloadComponent extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                component: null
            }
        }
        async componentWillMount() {
            // 加载页面
            const {default: component} = await componentfn();
            // 加载页面完成
            this.setState({component})
            // 在这里我们已经知道页面静态资源加载的开始时间和加载时间 这里可以加一个加载静态资源进度条 
        }
        render() {
            const C = this.state.component;
            // 有些页面加载比较快 会出现闪屏的情况 可以在异步请求资源时  可以用setTimeout加一个时间防止加载过快导致闪屏
            return C ? <C {...this.props}/> : null;
        }
    }
    return LazyloadComponent;

使用

const A = lazyLoad(() => import("../components/a"))

webpack 会根据import()方法打包出单独的js文件 在访问相关功能时请求其静态资源

减少代码体积

选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。

其中一些值适用于开发环境，一些适用于生产环境。对于开发环境，通常希望更快速的 source map，需要添加到 bundle 中以增加体积为代价，但是对于生产环境，则希望更精准的 source map，需要从 bundle 中分离并独立存在。

// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

"scripts": {
   
    "build": "cross-env GENERATE_SOURCEMAP=false node scripts/build.js ",
  },

shouldUseSourceMap 设置为false 在生产环境中关闭映射 能减少约百分之60以上的代码体积

devtool - devtool - Webpack中文文档

antd 按需加载

bable plugins 添加

plugins: [
    ['import',[{  // 导入一个插件
        libraryName: 'antd',   // 暴露的库名
        style: true // 直接将ants样式文件动态编译成行内样式插入，就不需要每次都导入
    }]]
],

Gzip压缩

首屏loading

复杂页面拆分

select 分页