webpack八股文1

一、Webpack：从配置到优化

1. 核心使用流程

bash

# 基础流程
npm init -y
npm install webpack webpack-cli --save-dev
# 配置webpack.config.js → 配置入口(entry)、输出(output)、loader、plugin等
npx webpack --config webpack.config.js

2. 优化手段（分场景）

▶ 构建速度优化

• 缓存：cache-loader、hard-source-webpack-plugin

• 多线程：thread-loader、HappyPack（Webpack4）

• 缩小范围：

  js

  module.exports = {
    resolve: {
      extensions: ['.js', '.vue'], // 减少文件后缀搜索
      alias: { '@': path.resolve('src') } // 路径别名
    }
  };
  

▶ 产出体积优化

• 代码压缩：TerserPlugin（JS）、CssMinimizerPlugin（CSS）

• Tree Shaking：

  js

  // package.json 中标记副作用
  "sideEffects": ["*.css", "*.scss"]
  

• 代码分割：

  js

  optimization: {
    splitChunks: {
      chunks: 'all' // 公共代码抽离
    }
  }
  

▶ 体验优化

• 懒加载：动态import()

• 预加载：<link rel="prefetch"> + Magic Comments

  js

  import(/* webpackPrefetch: true */ './module.js');
  

3. 原理思考

• 模块化：Webpack 将所有资源视为模块，通过依赖图（Dependency Graph）管理。
• Loader：链式调用，从右到左执行（如 sass-loader → css-loader → style-loader）。
• Plugin：基于Tapable的事件流机制，在编译生命周期插入钩子。

---

二、Vue：工程化实践

1. 代码组织规范

markdown

src/
├── components/      # 通用组件
├── views/           # 路由页面
├── store/           # Vuex状态管理
├── router/          # 路由配置
├── assets/          # 静态资源
└── api/             # 接口封装

2. 性能优化技巧

• 组件级优化：

  • v-if vs v-show（频繁切换用v-show）
  • 使用<keep-alive>缓存组件

• 状态管理：

  • Vuex模块化 + 按需加载
  • 大数据量用shallowRef/shallowReactive减少响应式开销

• SSR/SSG：Nuxt.js 解决SEO和首屏问题。

3. 与Webpack结合

• Vue Loader：处理单文件组件（SFC）
• 特性开关：通过__VUE_OPTIONS_API__剔除未使用的Options API代码

---

三、微信小程序开发要点

1. 工程化实践

• 自定义组件：Component 构造器 + behaviors 复用逻辑

• 性能优化：

  • 减少setData数据量（避免更新整个对象）
  • 使用wx.nextTick控制渲染时序

• 分包加载：

  json

  {
    "subPackages": [{
      "root": "packageA",
      "pages": ["pages/cat", "pages/dog"]
    }]
  }
  

2. 发布流程

图表

代码

---

四、复杂场景题拆解

场景1：Vue长列表渲染卡顿

解决方案：

1. 虚拟滚动（vue-virtual-scroller）
2. 手动实现分片渲染（requestAnimationFrame分批更新）
3. 冻结非可视区数据（Object.freeze）

场景2：小程序启动白屏时间长

优化链：

1. 分包加载 + 独立分包
2. 首屏数据预请求（onLoad阶段提前发请求）
3. 骨架屏 + 本地缓存策略

场景3：Webpack打包产物体积超标

诊断工具：

• webpack-bundle-analyzer 分析体积

• 针对性优化：

  • 按需加载第三方库（如lodash-es）
  • 压缩图片（image-webpack-loader）
  • 提取公共依赖（SplitChunks）

---

五、扩展思考

1. 现代替代方案

• Vite：基于ESM的快速开发工具（替代Webpack开发环境）
• Pinia：Vuex的轻量替代方案

2. 自动化发布

• CI/CD：通过GitHub Actions或Jenkins自动化构建发布

  yaml

  # GitHub Actions示例
  - name: Build
    run: npm run build
  - name: Deploy
    uses: easingthemes/ssh-deploy@main
    with:
      SSH_PRIVATE_KEY: ${{ secrets.SSH_KEY }}
      SOURCE: "dist/"
      TARGET: "/var/www/html"
  

---

通过这种结构化梳理，你可以：

1. 快速定位技术栈的薄弱环节
2. 针对场景选择优化方案
3. 在面试中展现系统化工程思维

如果需要更具体的某部分展开（如Webpack的HMR原理、Vue3组合式API实战技巧等），可以进一步探讨！