Rollup 代码分隔

Rollup 代码分割

引言

代码分割是提高Web应用性能的重要技术之一。通过将代码拆分成多个小块，可以根据需要加载特定的代码块，而不是一次性加载整个应用。这不仅可以减少初始加载时间，还可以提升用户体验。

Rollup 是一个模块打包工具，它支持多种插件来实现代码分割功能。本章将详细介绍如何使用Rollup进行代码分割，并提供一些实际示例。

安装和配置

首先，你需要安装Rollup及相关插件。可以通过npm或yarn来安装：

npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel @rollup/plugin-serve
# 或者
yarn add --dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel @rollup/plugin-serve

接下来，创建一个rollup.config.js文件，配置基本的打包选项：

// www.javascriptcn.com code example
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.js', // 入口文件
  output: {
    file: 'dist/bundle.js',
    format: 'iife' // 立即执行函数表达式
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({ babelHelpers: 'bundled' })
  ]
};

创建入口文件

假设你有一个简单的应用，其中包含多个模块。你可以为每个功能创建单独的模块，然后在入口文件中导入它们。

src/main.js

import { featureA } from './feature-a';
import { featureB } from './feature-b';

featureA();
featureB();

src/feature-a.js

export function featureA() {
  console.log('Feature A is running!');
}

src/feature-b.js

export function featureB() {
  console.log('Feature B is running!');
}

使用插件进行代码分割

为了实现代码分割，我们需要使用@rollup/plugin-dynamic-import-vars插件。这个插件允许我们动态地导入模块。

首先，安装该插件：

npm install --save-dev @rollup/plugin-dynamic-import-vars
# 或者
yarn add --dev @rollup/plugin-dynamic-import-vars

然后，在配置文件中添加该插件：

// www.javascriptcn.com code example
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm'
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({ babelHelpers: 'bundled' }),
    dynamicImportVars()
  ],
  preserveEntrySignatures: false,
  output: {
    entryFileNames: '[name].js',
    chunkFileNames: '[name]-[hash].js',
    assetFileNames: '[name].[ext]'
  }
};

在这个配置中，我们设置了输出格式为ES模块（format: 'esm'），并启用了动态导入。

动态导入模块

在你的主入口文件中，可以使用动态导入语法来按需加载模块：

src/main.js

// www.javascriptcn.com code example
function loadFeatureA() {
  import('./feature-a').then(({ featureA }) => {
    featureA();
  });
}

function loadFeatureB() {
  import('./feature-b').then(({ featureB }) => {
    featureB();
  });
}

// 触发加载
loadFeatureA();
loadFeatureB();

这样，当调用loadFeatureA或loadFeatureB时，相应的模块才会被加载。

测试和调试

为了测试代码分割的效果，可以使用@rollup/plugin-serve插件来启动一个本地服务器：

// www.javascriptcn.com code example
import serve from 'rollup-plugin-serve';

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm'
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({ babelHelpers: 'bundled' }),
    dynamicImportVars(),
    serve({
      open: true, // 打开浏览器
      contentBase: 'dist',
      port: 3000
    })
  ],
  preserveEntrySignatures: false,
  output: {
    entryFileNames: '[name].js',
    chunkFileNames: '[name]-[hash].js',
    assetFileNames: '[name].[ext]'
  }
};

运行打包命令后，打开浏览器访问http://localhost:3000，你应该能看到动态加载的效果。

总结

通过以上步骤，我们已经成功实现了Rollup中的代码分割功能。这种方式不仅提高了应用的加载速度，还优化了资源管理。希望这些示例对你有所帮助！