/vuepress-plugin-named-chunks

:name_badge: Generate named chunks in VuePress.

Primary LanguageJavaScriptMIT LicenseMIT

vuepress-plugin-named-chunks

Migrated to vuepress-community

npm CircleCI

VuePress uses dynamic import to load page components and layout components. Each component becomes a separate chunk, but their names are automatically generated, which is not conducive to subsequent tracking. vuepress-plugin-named-chunks is a VuePress plugin for generating named chunks for page and layout components.

Usage

Global Installation

npm install -g vuepress-plugin-named-chunks
# OR
yarn global add vuepress-plugin-named-chunks

Local Installation

npm install vuepress-plugin-named-chunks
# OR
yarn add vuepress-plugin-named-chunks

Add to config.js

module.exports = {
  plugins: [
    'named-chunks',
  ],
}

or

module.exports = {
  plugins: {
    'named-chunks': {
      pageChunkName: page => 'page' + page.key.slice(1),
      layoutChunkName: layout => 'layout-' + layout.componentName,
    },
  }
}

API

This plugin will inject some properties into context API.

chunk name of a page component

  1. context.pages is an array of Page objects.
  2. page._chunkName is the chunk name of the page component.

chunk name of a layout component

  1. context.themeAPI.layoutComponentMap is a map of LayoutComponent objects.
  2. layout.chunkName is the chunk name of the layout component.

Configurations

pageChunkName

  • type: ((page: Page) => string) | false
  • default: ({ key }) => 'page' + key.slice(1)

A function that generates chunk name from Page object.

layoutChunkName

  • type: ((layout: LayoutComponent) => string) | false
  • default: false

A function that generates chunk name from LayoutComponent object.