面试题：Webpack代码分离与懒加载在复杂单页应用中的优化策略

Webpack配置调整

优化splitChunks配置：
- 合理设置chunks：
  - 使用splitChunks.chunks: 'all'，这样可以对所有类型的chunk（如入口chunk和异步chunk）进行代码分割。
  - 例如：

module.exports = {
  //...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

设置minSize和maxSize：
- minSize设置为一个合适的值（如30000，即30kb），避免生成过多过小的chunk。maxSize可设置为例如200000（200kb），确保分割后的chunk大小适中，不至于过大影响加载。
- 示例：

module.exports = {
  //...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 200000
    }
  }
};

设置cacheGroups：
- 将常用的第三方库（如lodash、react等）提取到单独的vendor chunk中。
- 比如：

module.exports = {
  //...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name:'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

调整output配置：
- 设置publicPath：确保publicPath设置正确，对于CDN部署的情况，设置为CDN的地址，加快资源加载。
- 例如：

module.exports = {
  //...其他配置
  output: {
    publicPath: 'https://your-cdn.com/'
  }
};

插件使用

使用webpack - bundle - analyzer插件：
- 安装：npm install --save - dev webpack - bundle - analyzer。
- 在Webpack配置中引入：

const BundleAnalyzerPlugin = require('webpack - bundle - analyzer').BundleAnalyzerPlugin;
module.exports = {
  //...其他配置
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

该插件会生成可视化报告，帮助分析chunk的大小和依赖关系，便于找出过大或不合理的chunk进行优化。

使用PreloadPlugin：
- 安装：npm install --save - dev @vue/pre - load - webpack - plugin（如果是Vue项目，其他框架也有类似插件）。
- 配置：

const PreloadPlugin = require('@vue/pre - load - webpack - plugin');
module.exports = {
  //...其他配置
  plugins: [
    new PreloadPlugin({
      rel: 'preload',
      as(entry) {
        if (/\.css$/.test(entry)) return'style';
        if (/\.woff2?$/.test(entry)) return 'font';
        if (/\.png|jpe?g|gif|svg$/.test(entry)) return 'image';
        return'script';
      }
    })
  ]
};

该插件会生成<link rel="preload">标签，提前加载关键资源，优化页面加载性能。

懒加载时机把控

基于路由的懒加载：
- 在路由配置中，合理设置懒加载。例如在Vue Router中：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: () => import('./views/Home.vue')
    }
  ]
});

确保只有在需要显示对应路由页面时才加载相关组件，避免过早加载。

用户行为触发懒加载：
- 对于一些非关键内容，如用户点击某个按钮后才显示的模块，可以通过监听用户行为来触发懒加载。
- 例如在JavaScript中：

<button id="loadButton">加载模块</button>
<script>
const loadButton = document.getElementById('loadButton');
loadButton.addEventListener('click', () => {
  import('./lazyModule.js').then(module => {
    // 使用加载的模块
    module.doSomething();
  });
});
</script>

视口相关懒加载：
- 对于页面上处于视口外的内容，可以使用Intersection Observer API结合懒加载。
- 示例代码：

<div class="lazy - load - item" data - import - path="./lazyComponent.js"></div>
<script>
const lazyItems = document.querySelectorAll('.lazy - load - item');
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const importPath = entry.target.dataset.importPath;
      import(importPath).then(module => {
        // 处理加载的模块，如渲染组件
      });
      observer.unobserve(entry.target);
    }
  });
});
lazyItems.forEach(item => {
  observer.observe(item);
});
</script>

这样可以确保只有当内容即将进入视口时才进行懒加载，提高性能。

星途面试题库

面试题：Webpack代码分离与懒加载在复杂单页应用中的优化策略

知识考点

面试题答案

Webpack配置调整

插件使用

懒加载时机把控