Heshiyu's Blog

# React前端工程模板

主要技术： react(16.9.0) + antd(3.23.3) + webpack(4.39.1) + react-router-dom(5.0.1) + react-loadable(5.5.0)

# 基本属性

种类： 目前一共有3套脚手架（单页js、单页ts、多页js），底层配置大体相同。

支持工具：

  • React v16.9.0
  • Antd v3.23.1
  • Webpack v4.39.1
  • ESLint & Stylelint & Prettier
  • Husky
  • HappyPack
  • DLL 动态链接库
  • CDN下载依赖（lodash、moment）
  • react-router v4（BrowserRouter）

# npm包的放置策略

方式 DLL CDN webpack打包 高速缓存
开发 react、react-router-dom、react-dom、antd lodash、moment / ✔
打包 / lodash、moment react、react-router-dom、react-dom、antd ✘

# Q1：为什么antd在开发时放DLL、打包时放webpack、不考虑CDN？

  • 开发时，通过DLL会提前完整构建，提高编译速度
  • 打包时，可以利用 tree shaking，减少打包体积
  • CDN 需要 externals。若通过 Babel “按需引入”，最终 externals 效果会有差异；并且CDN体积较大（400kb），不考虑CDN

# Q2：详细放置策略？

  • DLL：将第三方库提前完整构建，体积较大，且不可tree shaking

    • 推荐：仅在 开发阶段 使用DLL

  • CDN：和DLL类似，但需额外 externals

    • externals 对于 “设置了按需加载”的 antd 不起作用，需额外 externals 掉 antd 里的某种组件
    • 推荐：不影响主程序、体积较小的第三方库可使用（如：lodash、moment）

  • webpack打包：参与tree shaking、JS代码压缩

    • 推荐：生产阶段 尽量使用webpack打包，体积较小

# 有关Happypack的使用

目前在开发环境（webpack.dev.js）使用了 happypack 多线程处理，来加快编译速度。

声明 线程数 为最大利用数：

// happypack线程池（个数为操作系统cpu的数量）
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
1
2

目前只针对 eslint-loader、babel-loader、css-loader 这三类loader进行了额外线程处理。

# 有关DLL的使用（可引入类似auto dll的plugin进行改进）

1、声明DLL打包范围（config/dll.config.js）

  • 目前只针对 react、antd 进行了DLL打包
  • 采用了 devtool: 'eval-cheap-source-map' 的 sourcemap 方式

2、运行 yarn run dll，可在 根目录下vendor 生成 DLL 文件

3、在 webpack.dev.js 的 plugins，处理与 webpack 的关联

/* DLL相关（开始） */
// 将 DLL 和 webpack进行关联
new webpack.DllReferencePlugin({
    manifest: path.join(paths.vendor, 'react.manifest.json')
}),
new webpack.DllReferencePlugin({
    manifest: path.join(paths.vendor, 'antd.manifest.json')
})
/* DLL相关（结束） */
1
2
3
4
5
6
7
8
9

4、在 public/index.html 下，声明 dll 的插槽变量

<script type="text/javascript" src="<%= htmlWebpackPlugin.options.dll.react %>"></script>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.dll.antd %>"></script>
1
2

5、在 webpack.base.js 的 plugins 利用 HtmlWebpackPlugin 插件，针对 dll 插槽变量 进行赋值

plugins: [ 
    new HtmlWebpackPlugin({
        // ...
        dll: {
            react: !isProduction ? './vendor/react.dll.js' : '',
            antd: !isProduction ? './vendor/antd.dll.js' : ''
        }
    })
]
1
2
3
4
5
6
7
8
9

6、运行 yarn run dll 即可完成

也可以通过组合指令 yarn run dev，来实现打包 DLL 后立即启动项目。

# 有关高速缓存

通过高速缓存可以节省90%的编译时间

一般启动项目10s内，热编译1s内

new HardSourceWebpackPlugin({
    // cacheDirectory声明缓存存放的文件夹。默认情况下，将缓存存储在build/node_modules下的目录中
    cacheDirectory: 'node_modules/.cache/hard-source/[confighash]',
    recordsPath: 'node_modules/.cache/hard-source/[confighash]/records.json',
    // configHash在启动webpack实例时转换webpack配置
    // 并针对cacheDirectory，为不同的webpack配置来构建不同的缓存
    configHash: function(webpackConfig) {
        // node-object-hash on npm can be used to build this.
        return require('node-object-hash')({ sort: false }).hash(webpackConfig);
    },
  
    // 如果Hash与之前构建的不同，会使用新的缓存
    environmentHash: {
        root: process.cwd(),
        directories: [],
        files: ['package-lock.json', 'yarn.lock']
    },
 
    // 自动清除过期的、体积大的缓存
    cachePrune: {
        // 设置缓存的最大有效期（2d）
        maxAge: 2 * 24 * 60 * 60 * 1000,
        // 设置缓存的最大体积（50M）
        sizeThreshold: 50 * 1024 * 1024
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

但是要注意：因为是读取 cache 的编译内容，所以一般会在 第二次启动时 高速缓存才会生效

启动方法：

yarn start:cache
1

# 有关路由自动化渲染

# 使用方式

1、定义路由表

2、需要渲染子路由时，在父路由使用 <Routes {...props} />

# 优点

  • 支持路由组件的多种配置方式
    • 导入方式：动态导入、静态导入
    • 响应式：pc、mobile
  • 支持路由表的统一管理&维护
  • 提供工具函数
    • getRouteInfo：根据props，查找指定路由及其父路由信息；
      • 可用于：渲染当前路由的同级tabList
    • getRouteLine：根据props，查找当前路由在路由表中的层级关系
      • 可用于：生成当前路由的面包屑路径；

# 扩展性

可以针对项目对 权限设置 的要求，适当搭配使用。

查看详情

更新时间: 6/29/2020, 9:13:21 PM

← 基于Antd的业务组件库 →