vue2中,vue-cli进行element-ui打包不放入check-vendor.js,而是单文件组件形式存在?

vue2中,vue-cli进行element-ui打包不放入check-vendor.js,而是单文件组件形式存在,比如el-input-683fb76c.js这种的,完全从check-vendor中抽离出来,而且是懒加载的形式。
也就是说:

如果home.vue组件使用了el-input组件,才会加载这个组件,而按照现在的打包方式,check-vendor会在页面一开始渲染就加载,包也很大,首页优化难做。

所以能不能通过vue-cli的webpack配置完成这个打包,求解

现在对一些组件使用注解魔法:

let dNumber = ()=> import(/* webpackChunkName: "d-Number" */ '@/components/public/d-number');

打包出来的文件名就是d-Number.js,但是不知道怎么抽离element-ui的每一个按需导入的组件,也形成懒加载的形式,或者check-vendor.js其实可以不存在,所有的资源都是懒加载形式

阅读 1.6k
avatarAI BotBETA

在 Vue 2 和 Vue CLI 中,Element UI 的组件确实可以以单文件组件的形式进行打包,并且支持懒加载。这可以通过在组件上使用动态导入来实现。动态导入允许你将模块的加载延迟到需要时才进行,从而减少首屏加载时间。

要实现这一目标,你可以对 Element UI 的组件进行如下处理:

  1. 使用动态导入:你可以使用 webpack 的动态 import() 语法来按需加载组件。例如,如果你想按需加载 el-button 组件,你可以这样做:
let ElButton = () => import(/* webpackChunkName: "el-button" */ 'element-ui/lib/button');
  1. 配置 webpack:如果你想进一步控制 webpack 的打包行为,你可以修改 vue.config.js 文件(如果存在)来自定义 webpack 配置。例如,你可以使用 optimization.splitChunks 来配置代码拆分和懒加载。
  2. 优化 check-vendorcheck-vendor.js 文件通常用于检查并引入必要的第三方库。如果你可以确保所有需要的库都已经通过按需加载的方式引入,那么 check-vendor.js 的作用可能会减小。但是,如果你仍然需要这个文件,你可以考虑自定义它,使其只包含必要的检查和引入。
  3. 使用异步组件:Vue CLI 已经支持异步组件,这意味着你可以在创建组件时返回一个 Promise,从而延迟组件的加载。这对于实现按需加载非常有用。
  4. 使用 Vue 的异步组件工厂函数:你可以使用 Vue 的 async 函数和 Vue.component 方法来创建异步组件。这允许你在需要时才加载和注册组件。

总的来说,通过上述方法,你应该能够使用 Vue CLI 和 webpack 配置来实现 Element UI 组件的按需加载和懒加载。同时,根据你的项目需求和性能要求,你可能还需要进一步调整 webpack 配置和其他优化措施。

1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题