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

Question

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其实可以不存在，所有的资源都是懒加载形式

Answer 1

问过一个类似的问题:

https://segmentfault.com/q/1010000044542070

可试试在.env配置:

# 第一放在第一行NODE_ENV = production

Answer 2

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

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

1. 使用动态导入：你可以使用 webpack 的动态 import() 语法来按需加载组件。例如，如果你想按需加载 el-button 组件，你可以这样做：

let ElButton = () => import(/* webpackChunkName: "el-button" */ 'element-ui/lib/button');

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

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