多页应用 on ZiYang FrontEnd Interviewhttps://fe-interview.pangcy.cn/tags/%E5%A4%9A%E9%A1%B5%E5%BA%94%E7%94%A8/Recent content in 多页应用 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800Webpack多页与单页应用配置https://fe-interview.pangcy.cn/docs/engineering/webpack/webpack-12/Wed, 05 Mar 2025 09:59:05 +0000https://fe-interview.pangcy.cn/docs/engineering/webpack/webpack-12/<h2 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>该题目主要考察候选人对Webpack配置的底层原理和工程化能力的掌握程度，核心评估维度包括：</p> <ol> <li><strong>多入口配置能力</strong>：理解SPA/MPA在entry配置上的本质差异</li> <li><strong>HTML生成策略</strong>：掌握HtmlWebpackPlugin在单页与多页场景下的不同用法</li> <li><strong>输出结构设计</strong>：合理组织构建产物的目录结构避免文件冲突</li> <li><strong>资源优化意识</strong>：在多页场景下的公共依赖提取策略</li> <li><strong>工程化思维</strong>：动态配置方案应对大规模页面场景</li> </ol> <h2 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="关键知识点">关键知识点 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li>Entry配置 &gt; HTML模板生成 &gt; 输出文件名规则 &gt; SplitChunks优化</li> </ol> <h3 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p><strong>SPA配置</strong>：</p> <ul> <li>单入口模式：<code>entry: { main: './src/index.js' }</code></li> <li>使用单个HtmlWebpackPlugin实例</li> <li>输出使用<code>[name].[contenthash].js</code>避免缓存问题</li> </ul> <p><strong>MPA配置</strong>：</p> <ul> <li>多入口声明：<code>entry: { page1: './src/page1.js', page2: './src/page2.js' }</code></li> <li>多个HtmlWebpackPlugin实例（每个页面对应一个）</li> <li>通过<code>filename: 'pages/[name]/index.html'</code>实现目录隔离</li> <li>使用<code>chunks: ['page1', 'vendors']</code>精确控制资源注入</li> </ul> <p><strong>优化策略</strong>：</p> <ul> <li>通过SplitChunks提取公共模块：</li> </ul> <div class="prism-codeblock "> <pre id="2ca101e" class="language-javascript "> <code>optimization: { splitChunks: { cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, name: &#39;vendors&#39;, chunks: &#39;all&#39; } } } }</code> </pre> </div> <h3 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li>MPA中未指定chunks导致所有JS被注入各个页面</li> <li>输出文件名未使用哈希导致浏览器缓存问题</li> <li>未正确处理静态资源路径导致页面资源404</li> <li>公共模块提取策略不当造成重复打包</li> </ol> <h2 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>SPA与MPA的Webpack配置差异主要体现在：</p>Vite多页应用与懒加载实现https://fe-interview.pangcy.cn/docs/engineering/vite/vite-14/Wed, 05 Mar 2025 10:37:25 +0000https://fe-interview.pangcy.cn/docs/engineering/vite/vite-14/<h2 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>本题主要考核以下核心能力维度：</p> <ol> <li><strong>构建工具深度使用能力</strong>：Vite多页应用配置涉及Rollup构建机制的掌握</li> <li><strong>模块化工程化思维</strong>：动态导入语法与代码分割的实际应用</li> <li><strong>性能优化意识</strong>：通过懒加载实现资源加载优化</li> </ol> <p>具体技术评估点：</p> <ul> <li>Vite多入口配置方案</li> <li>Rollup输入输出配置原理</li> <li>动态import()的编译结果与HTTP/2推送机制</li> <li>代码分割(Code Splitting)与预加载策略</li> <li>模块依赖解析规则</li> </ul> <hr> <h2 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="关键知识点优先级">关键知识点优先级 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9%e4%bc%98%e5%85%88%e7%ba%a7" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li>Rollup输入配置 &gt; 动态导入语法 &gt; 分包策略优化</li> </ol> <h3 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p><strong>多页应用(MPA)配置</strong>： Vite通过<code>build.rollupOptions.input</code>配置多入口，每个入口对应独立HTML文件。构建时生成多个独立bundle，通过文件系统约定式路由自动关联入口模块。</p> <p><strong>动态导入机制</strong>： 使用<code>import()</code>语法触发代码分割，Vite会：</p> <ol> <li>解析动态导入路径</li> <li>生成独立chunk文件</li> <li>注入预加载标签<code>&lt;link rel=&quot;modulepreload&quot;&gt;</code></li> <li>在浏览器空闲时按需加载</li> </ol> <h3 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li>混淆传统多页应用与SPA路由配置</li> <li>动态导入路径使用变量导致无法静态分析</li> <li>忽略公共模块提取导致的重复打包</li> </ol> <hr> <h2 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p><strong>多页应用配置</strong>：</p> <ol> <li> <p>创建<code>pages</code>目录存放各页面</p> <div class="prism-codeblock "> <pre id="20f1243" class="language- "> <code>/src /pages /home index.html main.js /about index.html main.js</code> </pre> </div> </li> <li> <p>配置<code>vite.config.js</code>：</p> </li> </ol> <div class="prism-codeblock "> <pre id="1470e1d" class="language-javascript "> <code>export default { build: { rollupOptions: { input: { home: &#39;/src/pages/home/index.html&#39;, about: &#39;/src/pages/about/index.html&#39; } } } }</code> </pre> </div> <p><strong>组件懒加载实现</strong>：</p>