view-design 使用 webpack 配置 externals问题

最新推荐文章于 2021-10-29 23:28:52 发布
最新推荐文章于 2021-10-29 23:28:52 发布
阅读量676 收藏
点赞数
分类专栏： Vue 文章标签： 内存优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xl4277/article/details/109218536
版权
博客介绍了在升级从iview2到iview4的过程中，如何正确调整Webpack的externals配置。在旧版本中，只需将iview设置为externals，但在新版本view-design中，需要同时声明'iview'和'ViewUI'，以确保库的正确引用。
摘要由CSDN通过智能技术生成

目前使用的是iview4 , 也就是 view-design

以前使用iview2 的时候, webpack 配置 externals

 

  externals: {
    ...
    "iview": 'iview',
    ...
  },

现在用版本4, view-design, 需要这样配置

  externals: {
    ...
    "view-design": 'iview',
    "iview": 'ViewUI',
    ...
  },

先抛出  iview , 再抛出  ViewUI

熊小露的blog
关注
专栏目录
html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件
02-06
html-webpack-externals-plugin :police_car_light: 已淘汰 :police_car_light: 抱歉，该模块已不再维护，其功能已由jharris4， 和。 您可能会遇到问题，并且最近的Webpack项目尚未使用它。 与一起使用以使用...
配置webpack中externals来减少打包后vendor.js的体积
fanyanjiang的博客
09-18 625
在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。 webpack的外部扩展(externals)可以有效的解决。 webpack之externals官方参考文档，请戳这里→ externals 下面就以Vue项目为例，介绍一下externals的使用。项目中引用了vue、vue-router、axios、iview、qs等第三方库，那么我
Vue webpack 压缩打包上线 首屏加载时间过长 优化方案
Auto
12-04 1469
文章目录Vue 上线优化方案#1 为什么要引入外部CDN#2 如何优化?#2.1 登录页面(打开网站的第一个页面)图片#2.2 Router懒加载#2.3 引入外部CDN#2.4 启用 Gzip 压缩#3 验证#3.1 打包 Vue 上线优化方案 #1 为什么要引入外部CDN 最近博客上线,但是在首次加载的时候,需要消耗很多时间,大概在50秒左右,就是说第一页登录页面,就需要用户等待50秒(服...
webpack之externals操作三部曲--正确的姿势
热门推荐
qiqi学习园地
08-31 1万+
排除误区： 看到有人误解externals的作用，所以必须先正确认识externals的作用 1.作用 首先webpack提供这个==externals==选项作用是==从打包的bundle文件中排除依赖==。换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去，而是通过script的方式去访问这些依赖。 2.怎么用？ 以jque...
phaser3-typescript-webpack-externals-template：使用外部配置的Phaser 3 Typescript Webpack项目模板
02-04
phaser3-typescript-webpack-externals-template 一个通过和支持ES6的Phaser 3项目模板，其中包括使用外部phaser.min.js进行热重装以进行开发和生产就绪的构建。 还支持通过JavaScript模块import加载文件（请参见...
monaco-editor-esm-webpack-plugin
05-30
monaco-editor-esm-webpack-plugin 它依赖于 。 如果你想复制一个带有本地化的 monaco 编辑器，你可以看到 用于 monaco 编辑器的 webpack 插件，用于编译工作程序并处理本地化。 安装 npm install monaco-editor-...
image-minimizer-webpack-plugin：Webpack加载器和插件，用于使用imagemin压缩图像
02-06
image-minimizer-webpack-plugin 该插件使用优化图像。 入门 首先，您需要安装image-minimizer-webpack-plugin ： $ npm install image-minimizer-webpack-plugin --save-dev 可以用两种模式优化图像： （无质量...
moment-locales-webpack-plugin：使用webpack轻松删除未使用的Moment.js语言环境
02-06
moment-locales-webpack-plugin 使用Webpack构建时轻松删除未使用的Moment.js语言环境 为什么 大小的75％（160个KBs）¹是用于本地化的文件。 当您使用webpack构建应用程序时，。 如果您的应用仅支持几种语言，则...
Webpack的externals的理解
山海一哥的博客
04-27 1万+
webpack官网介绍： 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。 webpack的externals 上面的信息是什么意思呢？ 你可以通过script方式引入后，在文件中直接使用$这里是没有问题的，如果你使用了eslint，它会提示你该变量未定义。但是如果...
如何加快Vue单页加载（和打包）速度
github_38589282的博客
01-04 1万+
在使用个人境外服务器运行vue项目时，会遇到打包的vendor.js过大而导致无缓存加载时，页面会空白数秒之久。 解决这个问题有2个思路：1是通过压缩混淆代码、gzip实际减小代码大小；2是将部分不会改动的文件提出，放到CDN上。 这里列举几种解决方案。（uglify由于vue-cli已默认包含，这里不写） #1 gzip 使用gzip压缩vendor.js可以有效减
Vue集成iView详解
mrgao的博客
03-26 2542
iview集成说明 一、需要引入那些包 npm install iview //一些其他的包 //加载器 npm install iview-loader --save-dev //file-loader和url-loader配合使用，当url-loader无法加载时会自动使用file-loader，注意：引入iview.css必须要加载此包 npm intstall file-loader -...
Vue项目优化——通过 externals 加载外部 CDN 资源
Potry Code的博客
03-09 3123
1.发现项目中存在的问题 为了直观地发现项目中存在的问题，我们可以在打包时生成报告。我们可以通过VueCli可视化的UI面板运行bulid直接查看报告。 而在报告中我们发现了有这么一个文件，体积比较大，这样可能会造成我们较长时间的请求。 2.那么这个文件是怎么来的呢？它的作用是什么？ 原来，其实默认情况下，项目中我们通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，而这...
vue项目打包文件过大优化
hello world
04-03 1262
有些我是在打包前就做了的，但为了全面一点还是写一写，我用的是vue-cli3 配置文件vue.config.js 一、路由懒加载 每次进入一个新页面才加载该页面所需要的资源 component: () => import('@/view/setting/setting.vue') 二、把不常改变的库放到index.html中，通过cdn引入 最好引入指定版本，避免更新...
vue-cli4 + view-design(iview)
qq_41870566的博客
04-23 3165
因为项目要求用到定制主题，所以依照官方文档开始配置文件。在配置过程中遇到点问题。变量覆盖的方式可以成功配置颜色，用工具安装的方式没有成功，不知道是不是用脚手架搭建项目后与这种方式有冲突。本次配置是变量覆盖方式配置。 在全局样式文件里引用依赖包里的index.less样式文件，之后在main.js文件里引用你的全局样式文件。这种方式需要在vue.config.js配置文件里添加css样式配置...
webpack的externals优化项目
weixin_39782183的博客
03-10 630
用webpack打包项目的时候，如果项目体量比较大，往往打出来的包vender.js会很大，导致首屏加载慢，这时候用webpack提供的externals属性，像vue.js 、vuex.js 、vue-router.js 这些外部库，基本不会变的，如果将它们独立出来单独加载就能利于浏览器的缓存机制，不用每次都重新加载这些库js，并且大大的减少了打包的vendor.js文件 优化的步骤有两步，...
vue中配置ViewUI
Captain-G的博客
06-10 888
1.使用 cnpm install view-design --save。 2.完成后再执行 cnpm install。
Vue-Cli 4.0 CDN方式使用view-design (iview4)
JustinChia的博客
10-29 1043
使用CDN方式加载view-design可明显减小chunk-vendors.js 文件尺寸，提高页面加载速度。 配置方法如下： 1. 在vue.config.js里增加 configureWebpack，表示Vue和view-design从外部CDN加载。 configureWebpack: { externals: { vue:"Vue", "view-design": "iview" } }, 注意：不能仅从外部加载view-design会报错，必须同时从外部加载Vu.
vue-cli中webpack配置详解：入门与新版本对比
本文将深入解析vue-cli v2.8.1版本中的webpack配置，特别关注于开发和生产环境的配置细节。对于初学者和有一定经验的vue开发者来说，vue-cli提供了一套便捷的脚手架工具，但其背后的webpack配置可能并不完全透明。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值