前端项目重构的深度思考和复盘( 二 ) _前端

常用的措施有:

代码格式规范(如eslint)
逻辑语法类型约束(如typescript)
代码规范(如css命名规范OOCSS, BEM等, 文件命名规范, js变量命名复规范等)
git 提交规范(常见的是在git hooks的提交阶段对提交格式等进行校验)

当然, 这些都是需要结合自身团队和项目来定的, 这里只做参考.

工程化优化

工程化优化主要有以下几个场景:

由于业务不断增加, 系统的复杂性加大导致的本地运行和打包速度越来越慢
由于项目代码量的增加导致页面臃肿, 需要进行合理的拆分
基于已有的工程经验沉淀, 需要对工程化配置做进一步升级, 优化
老旧脚手架无法适应当前的项目生产效率

接下来我会针对以上场景, 进行一些解决方案的分享.

由于业务不断增加, 系统的复杂性加大导致的本地运行和打包速度越来越慢

针对这种情况, 我们可以借助 speed-measure-webpack-plugin 插件，它可以分析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时，从而让我们对打包时间较长的部分进行针对性优化。
同时默认情况react, react-dom, react-router 等公共模块在每次构建都会参与打包, 这些实际上是没有必要的, 我们可以将其传到 cdn上, 从而减少webpack 的打包”工作量“.
【前端项目重构的深度思考和复盘】我们可以安装 html-webpack-externals-plugin 来实现将指定模块从打包列表中排除, 具体用法如下:

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');module.exports = {// ...其他配置代码plugins: [new HtmlWebpackExternalsPlugin({externals: [{module: 'react',entry: 'https://cdn.dooring.cn/umd/react.production.min.js',global: 'React',},{module: 'react-dom',entry:'https://cdn.dooring.cn/umd/react-dom.production.min.js',global: 'ReactDOM',},],}),],};

为了追求更惊一步的打包效率, 我们可以使用并行的方式构建, 同样 webpack 生态也提供了对应的模块 parallel-webpack. 具体用法大家可以看文档, 非常简单方便.
其他还有很多优化的方案, 这里我列一下, 大家可以根据实际情况使用:

配置并行压缩(terser-webpack-plugin, css-minimizer-webpack-plugin, html-minimizer-webpack-plugin 等都支持parallel参数)
预编译资源模块(可以利用webpack.DllPlugin来提前将公共模块打包以便后续直接复用)
使用构建缓存(webpack5 内置的 cache 模块, 或者cache-loader)
对打包体积进行分析, 以便有针对性的优化(如webpack-bundle-analyzer)

当然除了对已有构建工具的优化, 我们可以评估一下重构成本, 将构建内核替换vite等更高效的构建工具.

由于项目代码量的增加导致页面臃肿, 需要进行合理的拆分

针对项目代码量的增加导致页面臃肿, 我们可以从项目本身的角度, 对项目进行拆解, 将公共模块抽离为公用业务类库或者组件库:

文章插图
图片
除了对项目进行可复用性拆分之外, 我们还需要根据系统复杂量级, 近一步拆分项目, 比如将一个巨石工程拆分为多个子工程, 单独运行维护, 或者采用之前热点讨论的微前端的模式, 比如使用 qAInkun, single-spa, Micro App, EMP, Garfish, Bit 这些优秀的微前端框架.
综上, 我们可以根据项目复杂度, 做如下优化: