代码分割

代码分割的概念 代码分割（Code Splitting）是一种前端性能优化技术，它允许我们将代码按需加载，而不是一次性加载所有代码。通过代码分割，我们可以将代码分为多个模块，每个模块负责应用的一部分功能。在需要时，再动态加载相应的模块。 代码分割的作用 代码分割的作用主要包括以下几点： 提高加载速度：通过按需加载代码，减少初始加载时间，提高页面加载速度。 优化运行效率：只加载需要的代码，减少内存占用，提高运行效率。 支持懒加载：实现模块的懒加载，提高用户体验。 实现代码分割的方法： 1、动态import()语法： 2、使用 Webpack 配置文件， 使用require.ensure实现代码分割： 3、使用

补充

补充：原笔记把三种代码分割的实现方式都写成了占位说明，下面给出具体写法。

1. 动态 import()（最常用）：webpack 把 import() 单独打成一个 chunk，按需加载。

// 点击按钮再加载图表库，首屏不下载
button.onclick = async () => {
  const { default: Chart } = await import(/* webpackChunkName: "chart" */ './chart');
  new Chart('#c').render();
};

2. webpack splitChunks（webpack 4+ 内置，替代 CommonsChunkPlugin）：自动把多个入口共享的模块抽成独立 chunk。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',         // 'initial' | 'async' | 'all'
      minSize: 30000,
      cacheGroups: {
        vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendor' }
      }
    }
  }
};

3. require.ensure（webpack 4 之前使用，已被动态 import() 取代）：

require.ensure(['./chart'], (require) => {
  const Chart = require('./chart');
  new Chart('#c').render();
}, 'chart');

多 <script> 标签手动拆分：传统做法，开发体验差、不利于缓存，不推荐。

来源整理自：我的有道云笔记