- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我想在 Vue 组件中延迟加载 ElementUI 的特定元素。
我试过这个:
import { Tree } from /* webpackChunkName : "element-ui" */ 'element-ui';
Vue.component(Tree.name, Tree);
Vue.use(Tree);
还有这个:
{
components: {
'el-tree': () => import(/* webpackChunkName : "element-ui" */ "element-ui").then(({Tree}) => Tree)
}
}
但在这两种情况下,都不会创建 element-ui.js
block 文件,而是将完整的库插入到 main.js
文件中。
如何动态导入仅使用过的 ElementUI 元素(而不是整个库)?
最佳答案
Why does
import('element-ui').then(({Tree}) => Tree)
bundle the whole ElementUI library?
element-ui
library is a CommonJS module ,这不是 tree-shakeable( webpack-common-shake
存在,但你的里程可能会有所不同)。
Can I import only individual elements from ElementUI?
ElementUI docs推荐使用 babel-plugin-component
(也由 ElementUI 编写)仅导入使用的元素。用法记录如下:
安装babel-plugin-component
:
npm install babel-plugin-component -D
编辑 .babelrc
以包含:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
静态导入所需的元素,并将其初始化为 Vue 组件:
import { Button } from 'element-ui';
Vue.component(Button.name, Button);
Can I dynamically import individual elements?
是的,这是可能的。
首先,了解 babel-plugin-component
的工作原理很有用。该插件有效地将其转换为:
import { __ComponentName__ } from 'element-ui';
Vue.component('x-foo', __ComponentName__);
进入:
import __ComponentName__ from 'element-ui/lib/__component-name__';
import 'element-ui/lib/__styleLibraryName__/__component-name__.css';
Vue.component('x-foo', __ComponentName__);
注释:
__styleLibraryName__
在 .babelrc
中的 Babel 预设选项中配置。__ComponentName__
) 格式化为 kebab-case (__component-name__
)。例如,Button
变成了 button
;并且 DatePicker
变成了 date-picker
。确保删除现有的 ElementUI 导入,这会破坏“按需”导入:
// import ElementUI from 'element-ui'; // REMOVE
// import 'element-ui/lib/theme-chalk/index.css'; // REMOVE
因此,我们可以使用这些知识动态导入特定元素,如下所示:
// main.js
import 'element-ui/lib/__styleLibraryName__/__component-name__.css';
Vue.component('x-foo', () => import(/* webpackChunkName: "x-foo" */ 'element-ui/lib/__component-name__'));
或者:
<!-- MyComponent.vue -->
<script>
import 'element-ui/lib/__styleLibraryName__/__component-name__.css';
export default {
components: {
'x-foo': () => import(/* webpackChunkName: "x-foo" */ 'element-ui/lib/__component-name__'),
}
}
</script>
例如,要导入具有 Chalk 主题的 Button
:
<!-- MyComponent.vue -->
<script>
import 'element-ui/lib/theme-chalk/button.css';
export default {
components: {
'el-button': () => import(/* webpackChunkName: "element-button" */ 'element-ui/lib/button'),
}
}
</script>
然而,这些元素相对较小,因此可能不值得延迟加载,考虑到容器 block 加上元素 block 的网络请求开销。另一方面,如果元素是有条件地呈现并且该条件很少为真,那么节省可能是值得的。
关于vue.js - 来自 ElementUI 的 VueJs + Webpack 延迟加载模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52104217/
像这样的webpack.config.js文件可以导出多个配置: module.exports = [{entry: 'a.js'}, {entry: 'b.js'}]; 当我调用 webpack 时
我正在尝试在 webpack 配置文件中设置 browserslist,但不知道如何执行此操作。 在 webpack.config 中尝试了以下内容: 'use strict'; module.exp
If you are using webpack v5 or above you do not need to install this plugin. Webpack v5 comes with t
使用webpack 2时,为什么需要以相反的顺序为“use:”键添加加载程序?为什么不从头到尾,从左到右列出每个加载器?有什么理由吗? 最佳答案 看起来像是一种约定,它很容易成为匹配执行顺序和源顺序的
当我 web pack 的时候 --watch --config webpack.production.config.js --mode production 我有这个错误: ERROR in Typ
我有一个使用 Twig 进行模板的项目。其中的所有数据都是静态的,但为了清楚起见,我已经在其他 Twig 文件中分离出部分页面(否则一个文件中会有数百行标记)。 我使用 webpack 作为构建工具,
我使用 cli 创建了一个 vue.js 项目。我使用了 webpack 模板。我已经为此工作了几天,并且工作顺利。 现在我需要向项目添加一个 npm 包。这个包建议我对 webpack 配置进行一些
我正在使用运行“node_modules/.bin/webpack”,但我知道可以配置路径以便您只需键入“webpack ”。不过,我找不到方法。 :/ 最佳答案 如果你安装一个包 globally
我正在服务器渲染我的 react 应用程序,如下所示: export default ({ clientStats }: { clientStats: any }) => async (req: Re
我试过包含一个通配符,它破坏了构建;和多个 favicon字段条目,它只使用最后一个输入。我如何支持使用此插件包含多个网站图标文件? 最佳答案 您还需要包括 favicons-webpack-pl
我正在使用 webpack 编译我的 Reactjs 文件。在我的项目中,我需要对后端进行 API 调用。 现在我有 3 个环境,分别是本地环境、开发环境和生产环境。 所以我有一个constants.
我正在将所有文件构建到“dist”文件夹中。 Dist ->index.html ->bundle.js 我已将配置设置为在我需要的特定端口上运行。 { entry: './src/ind
我想使用由 Closure Compiler 使用 Webpack 生成的 SourceMap,但我不知道该怎么做。 这是我的 webpack 配置: const ClosureCompiler =
有没有办法接收当前文件路径,就像在 requirejs 中一样? define(['module'], function (module) { console.log(module.uri)
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗?更新问题,使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
我是 webpack 的初学者用户。我想写一个webpack.config.js建立我的项目。但是有什么不对的地方! 这是我的 package.json (已安装所有依赖项): { "name":
我从这里开始:https://github.com/vuejs/vue-cli 我不确定它是否使用 Webpack。 包含/使用 webpack 的项目将包含哪些文件? 最佳答案 如果您的项目正在使用
Webpack,你将要了我的命。 html-webpack-plugin 在生产中运行良好。 'dist' 文件夹加载了我的 html 模板和插入的包。好酷。 但是,webpack-dev-serve
想象一下我有一个这样的项目: /moduleA/src... /moduleB/src... /mainApp/src... 每个模块和主应用程序都有一个单独的 webpack.config。模块是库
根据 webpack 文档,我尝试将 UglifyJSPlugin 添加到 webpack 4 项目中,但我仍然在我的包中看到死代码甚至注释,这让我认为我的 uglify 插件配置没有被使用。 Lin
我是一名优秀的程序员,十分优秀!