时间戳

首页 > 解决方案 > 使用 ~/components/ui/index.js 和 Vue.js 进行 Webpack treeshaking

javascript - 使用 ~/components/ui/index.js 和 Vue.js 进行 Webpack treeshaking

问题描述

您好，我的组件中的 UI 模块中有一个索引，导出该文件夹中的所有组件，如下所示：

~/components/ui/index.js：

import Button from './Button';
import Footer from './Footer';

export { Button, Footer }

我在一些页面中使用它，如下所示：

import { Button } from '~/components/ui';

export default {
  components: {
     Button,
     Footer: () => import('~/components/ui/Footer')
  }
}

现在理想情况下，Footer 组件应该被拆分为不同的块，并且仅在需要时才加载。如果我将其从 的导出中删除，则此方法有效~/components/ui/index.js，如下所示：

~/components/ui/index.js：

import Button from './Button';
//import Footer from './Footer'; 

export { Button, /*Footer*/ }

现在这行得通。但我想将其保留在索引中。并使用 webpack treeshakingFooter从默认包中消除。

我怎样才能做到这一点？

标签： javascriptvue.jswebpacknuxt.jstree-shaking

解决方案

推荐阅读