[学习笔记] 工程化的浅入了解

本文基于抖音"哲玄前端"，《全栈实践课》，引擎内核实现章节所写。

前端工程化

前端工程化不是单纯引入工具，而是通过规范、流程和架构设计，构建可持续发展的前端体系。其核心在于平衡效率与质量，适应业务快速增长的同时，保障代码的长期可维护性。开发者需持续关注工具演进，但避免盲目追逐新技术，而是根据团队规模与项目阶段选择合适方案。------------ DeepSeek

多页面构建

Elpis 最终的成品为一个类似轻代码的平台，所需支持多个页面的合成打包，以达到支持多个界面提供给客户自行选择组合，所以就需要多个模板页面多个入口进行打包，然而通过glob可以动态构造以及渲染。

js 复制代码

// 动态构造 pageEntries htmlWebpackPluginList
const pageEntries = {};
const htmlWebpackPluginList = [];
// 获取 app/pages 目录下所有入口文件 {entry.xx.js}
const entryList = path.resolve(process.cwd(), './app/pages/**/entry.*.js');
glob.sync(entryList).forEach(file => {
    const entryName = path.basename(file, '.js');
    // 构造 entry
    pageEntries[entryName] = file; 
    // 构造最终渲染的页面
    htmlWebpackPluginList.push(
        // html-webpack-plugin 辅助注入打包后的 bundle 文件到 tpl 文件中
        new HtmlWebpackPlugin({
            // 产物 (最终模板) 输出路径
            filename: path.resolve(process.cwd(), './app/public/dist/', `${entryName}.tpl`),
            // 指定要使用的模板文件
            template: path.resolve(process.cwd(), './app/view/entry.tpl'),
            // 要注入的代码块
            chunks: [ entryName ],
        })
    );
})

分包策略

首先说一下为什么需要进行分包，在前端需求的日益庞大下，文件也不断激增更因为Elpis最终的目标为一个多入口的前端页面，所以在项目的前期更加需要通过分包，可以将应用程序的代码拆分成多个较小的包，按需加载所需的代码，从而减少初始加载时间，提高应用的响应速度和用户体验。

js 复制代码

    // 配置打包输出优化 (配置代码分割，模块合并，缓存，TreeShaing，压缩等优化策略)
    optimization: {
        splitChunks: {
            chunks: 'all', // 对同步和异步模块都进行分割
            maxAsyncRequests: 10, // 每次异步加载的最大并行请求数
            maxInitialRequests: 10, // 入口点的最大并行请求数
            cacheGroups: {
                vendor: { // 第三方依赖库
                    test: /[\\/]node_modules[\\/]/, // 打包 node_modules 中的文件
                    name: 'vendor', // 模块名称
                    priority: 20, // 优先级，数字越大，优先级越高
                    enforce: true, // 强制执行
                    reuseExistingChunk: true, // 复用已有的公共 chunk
                },
                common: { // 公共模块
                    name: 'common', // 模块名称
                    minChunks: 2, // 被两处引用即被归为公共模块
                    minSize: 1, // 最小分割文件大小 (1 byte)
                    priority: 10, // 优先级
                    reuseExistingChunk: true, // 复用已有的公共 chunk
                }
            }
        },
        // 将 webpack 运行时生成的代码打包到 runtime.js
        runtimeChunk: true
    },

热更新

以上两点都是为了项目以及提高客户体验做准备，这一点就是为了开发者可以更便捷开发了。

引入 webpack-dev-middleware 监控文件的改动；
引入webpack-hot-middleware 将改动的效果第一时间反馈到页面上；
可以使应用程序一直保持运行状态；