JavaScript内核与高级编程之：`JavaScript`的`Code Splitting`：如何在 `Webpack` 和 `Rollup` 中实现代码分割。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

咳咳，各位靓仔靓女，晚上好！我是老司机，今天咱们来聊聊JavaScript的"Code Splitting"，也就是代码分割这玩意儿。保证让你听完之后，腰不酸了，腿不疼了，连打包速度都嗖嗖的！

为什么要Code Splitting？

想象一下，你开着一辆装满各种东西的大卡车，啥玩意儿都有，去送货。每次送一小件东西，都要把整辆卡车开过去，是不是太浪费油了？Code Splitting就是把你的大卡车拆成小面包车，需要啥就开啥，效率杠杠的！

具体来说，没有Code Splitting，你的所有JavaScript代码，包括你的框架、库、业务逻辑，甚至一些不常用的组件，都被打包到一个巨大的bundle.js文件里。用户首次加载页面的时候，浏览器要下载这个超级大的文件，解析，执行，才能看到页面。这体验，简直噩梦！

Code Splitting能解决什么问题呢？

更快的初始加载速度: 用户只需要下载当前页面需要的代码，体验提升明显。
更好的缓存利用率: 小的chunk文件更容易被浏览器缓存，下次访问速度更快。
减少不必要的代码执行: 只加载必要的代码，避免浪费用户的CPU和电量。

Code Splitting的类型

Code Splitting主要有两种类型：

基于路由的分割 (Route-based Splitting): 根据不同的路由，加载不同的代码块。比如，访问/home页面，只加载home.js和公共依赖；访问/profile页面，只加载profile.js和公共依赖。
基于组件的分割 (Component-based Splitting): 将一些大的、不常用的组件分割成单独的代码块。比如，一个弹窗组件，只有在用户点击按钮的时候才加载。

Webpack中的Code Splitting

Webpack提供了几种实现Code Splitting的方式，咱们一个个来看：

entry配置: 这是最简单的方式，但灵活性较低。可以把不同的页面或者功能模块定义成不同的入口点。
```
// webpack.config.js
module.exports = {
  entry: {
    home: './src/home.js',
    profile: './src/profile.js',
    common: './src/common.js' //公共模块
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
```
这样Webpack会生成home.bundle.js、profile.bundle.js和common.bundle.js三个文件。注意，虽然简单，但是容易造成重复依赖。比如，home.js和profile.js都用到了lodash，那么lodash就会被打包到两个文件中，浪费空间。要使用optimization.splitChunks来解决重复依赖的问题。

optimization.splitChunks: 这个是Webpack推荐的Code Splitting方式，可以自动提取公共模块，减少重复依赖。

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all', // 'all' 表示所有类型的 chunks 都需要分割
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/, // 匹配node_modules中的模块
          priority: -10, // 优先级，数值越大优先级越高
          name: 'vendors' // chunk的名字
        },
        common: {
          minChunks: 2, // 模块被引用2次及以上，才会分割
          priority: -20,
          reuseExistingChunk: true, // 如果chunk包含已存在的模块，则复用它
          name: 'common'
        }
      }
    }
  }
};

这个配置做了什么呢？

chunks: 'all'：告诉Webpack分割所有类型的chunks，包括initial (初始加载的chunks) 和 async (动态加载的chunks)。
cacheGroups：定义了分割的策略。
- vendors：匹配node_modules中的模块，将第三方库打包成一个vendors.bundle.js。priority越高，优先级越高。
- common：匹配被引用2次及以上的模块，将公共模块打包成一个common.bundle.js。reuseExistingChunk: true表示如果chunk包含已存在的模块，则复用它，避免重复打包。

splitChunks还有很多其他的配置项，可以根据具体的需求进行调整。

动态import() (Dynamic Imports): 这是最灵活的Code Splitting方式，可以在代码中动态地加载模块。

// src/index.js
async function getComponent() {
  const { default: element } = await import(/* webpackChunkName: "lodash" */ 'lodash');

  const div = document.createElement('div');
  div.innerHTML = element.join(['Hello', 'webpack'], ' ');
  return div;
}

getComponent().then(component => {
  document.body.appendChild(component);
});

这里使用import()函数异步加载lodash模块。/* webpackChunkName: "lodash" */是一个魔法注释，告诉Webpack这个chunk的名字是lodash。Webpack会将lodash打包成一个单独的lodash.bundle.js文件。

动态import的好处是：

按需加载: 只有在需要的时候才加载模块，可以显著提高初始加载速度。
灵活控制: 可以根据用户的操作或者条件动态地加载不同的模块。

结合实例：一个基于路由的Code Splitting例子

假设我们有一个简单的应用，包含两个页面：Home 和 Profile。

- src/
  - components/
    - Home.js
    - Profile.js
  - index.js
- webpack.config.js

Home.js:

// src/components/Home.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the home page!</p>
    </div>
  );
};

export default Home;

Profile.js:

// src/components/Profile.js
import React from 'react';

const Profile = () => {
  return (
    <div>
      <h1>Profile Page</h1>
      <p>This is your profile!</p>
    </div>
  );
};

export default Profile;

index.js:

// src/index.js
const route = window.location.pathname;

async function loadPage(route) {
  switch (route) {
    case '/home':
      const { default: Home } = await import(/* webpackChunkName: "home" */ './components/Home');
      ReactDOM.render(<Home />, document.getElementById('root'));
      break;
    case '/profile':
      const { default: Profile } = await import(/* webpackChunkName: "profile" */ './components/Profile');
      ReactDOM.render(<Profile />, document.getElementById('root'));
      break;
    default:
      ReactDOM.render(<div>404 Not Found</div>, document.getElementById('root'));
  }
}

loadPage(route);

webpack.config.js:

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/' // 注意： 动态import 需要设置 publicPath
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ],
  devServer: {
    historyApiFallback: true, // 配合前端路由
  }
};

在这个例子中，我们使用dynamic import()来根据不同的路由加载不同的组件。访问/home页面，会加载home.bundle.js；访问/profile页面，会加载profile.bundle.js。这样就实现了基于路由的Code Splitting。

注意事项:

使用动态import需要配置output.publicPath，确保Webpack能正确地找到chunk文件。
需要安装@babel/plugin-syntax-dynamic-import插件，才能支持动态import语法。

Rollup中的Code Splitting

Rollup也支持Code Splitting，但和Webpack的方式不太一样。Rollup更侧重于ES模块的打包，天然支持Code Splitting。

Rollup实现Code Splitting的方式主要是通过：

多入口点 (Multi-entry Points): 类似于Webpack的entry配置，可以定义多个入口点。

// rollup.config.js
export default {
  input: {
    home: 'src/home.js',
    profile: 'src/profile.js'
  },
  output: {
    dir: 'dist',
    format: 'es', // 或者 'cjs'
    chunkFileNames: '[name].js'
  }
};

这样Rollup会生成home.js和profile.js两个文件。

动态import() (Dynamic Imports): Rollup也支持动态import，用法和Webpack类似。
```
// src/index.js
async function loadComponent() {
  const { default: Component } = await import('./Component.js');
  // ...
}
```
Rollup会自动将Component.js打包成一个单独的chunk文件。

manualChunks配置: Rollup提供了一个manualChunks配置，可以手动指定哪些模块打包成一个chunk。

// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es',
    chunkFileNames: '[name].js'
  },
  manualChunks: {
    vendor: ['lodash', 'moment'], // 将lodash和moment打包成vendor.js
    // 可以使用函数形式
    utils: (id) => {
      if (id.includes('utils')) {
        return 'utils';
      }
    }
  }
};

manualChunks可以是一个对象，键是chunk的名字，值是一个模块ID数组。也可以是一个函数，接收模块ID作为参数，返回chunk的名字。

Webpack vs Rollup: Code Splitting 的选择

特性	Webpack	Rollup
定位	应用打包器 (适合大型应用)	库打包器 (适合小型库和组件)
Code Splitting	功能强大，配置灵活，支持多种方式 (entry, splitChunks, dynamic import)	天然支持ES模块，配置简单，上手容易 (multi-entry, dynamic import, manualChunks)
生态系统	庞大，插件丰富	相对较小，但也很活跃
上手难度	较高，配置项多	较低，配置项少

总结

Code Splitting是优化Web应用性能的重要手段。Webpack和Rollup都提供了强大的Code Splitting功能，可以根据项目的具体需求选择合适的方式。记住，没有银弹，只有最合适的方案。

说了这么多，希望大家对Code Splitting有了更深入的了解。实践是检验真理的唯一标准，赶紧动手试试吧！祝大家打包顺利，性能飞起！

最后，给大家留个思考题：如何在React中使用React.lazy和Suspense来实现Component-based Splitting呢？欢迎大家在评论区讨论！

下课！

发表回复 取消回复

发表回复取消回复