木灵鱼儿
阅读:1319
webpack5 externals打包时取消打包指定的库
简单说明
externals这个属性,常用来做cdn的功能,在打包的时候不打包指定的库,比如vue,jquery,然后在html文件部分,手动引入库的cdn链接,但是,你在开发的时候,你还是需要npm
或者yarn
安装这个库,import引入使用,只是打包的时候会自动剔除。
简单示例
webpack.config.js
module.exports = {
externals: {
uikit: "UIkit",
}
}
可以看到,externals是一个对象,对象里面有key和value,其中key的值就是package.json里面,安装的包的名字。
而value值则有点麻烦,需要知道cdn引入的js文件,它在全局抛出的变量是啥。value就是他的全局变量名。
以UIkit为例,下载他的js文件,可以看到自运行的函数里面这段话。
可以看到,自运行函数传入了一个this,this就是window对象,函数用t参数接收this,然后在后面有一个三元判断,最终给t赋值了一个UIkit
属性,这个就是全局变量了,其他的框架也是同理,如果压缩版js看不懂,看不压缩的也是一样的,一般这块函数不会被混淆。
这样我们的key和value就都有了,就能准确的在打包时,忽略不经常更新的库,利用cdn或者其他来提高网页的加载速度,减少首页白屏时间(spa)
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
vue cli3-cli4 打包后项目在二级路径的方法
默认情况vue的build打包,都是基于根路径来进行的,但是,如果我们将打包的文件放置再二级目录,就会导致文件无法加载,页面空白。原因有两个:路由路径无法正确匹配资源文件路径错误下面我们就来讲讲做法路由配置在路由实例的创建时,我们常常会看到一个base选项,内容如下:const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })base官方有很明确是解释:类型: string 默认值: "/"应用的基路径。例如,如果整个单页应用服务在 /app/ 下...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
webpack5 初始化《JJ》多页面的一些问题
问题多页面打包后,生成的script.php中包含了所有页面的js文件引入多页面打包后,生成的css.php中包含了所有页面的css文件引入解决方案个人判断是再new HtmlWebpackPlugin进行处理的时候出现了问题,他无法分辨被打包的页面是谁的。那么在HtmlWebpackPlugin中唯一区分的属性,就是chunks。但是在官方文档中,并没有声明他的类型。然后百度的文章,有两种:chunks:"xxxx"chunks:["xxxx","xxxx"]根据以往的经验,第一种应该是用于唯一值得情况,如果有多个则使用数组,...

webpack5 初始化《JJ》主题 下部
图片处理yarn add url-loader file-loader --dev很多人教程都莫名其妙,一张嘴就说推荐使用url-loader解析器,但是闭嘴不提url-loader是基于file-loader的,所以用url就必须两个都装,否则一旦你设置了url的limit限制文件大小,文件超出设置得大小后,就会报file-loader不存在的错误。webpack.config.jsmodule.exports = (env, argv) => ({ //模块-解析器loader module: { rules: [ //图片文件 { ...
webpack5 初始化《JJ》主题 上部
初始化安装yarn init yarn add webpack webpack-cli --devwebpack建议全局安装,省事yarn global add webpack webpack-cli如果不适用全局安装,直接在终端运行本项目的webpack需要使用npx命令npx webpack -v还有一个种办法就是在package.json创建快捷npm脚本,这样就不用加npx前缀了{ "scripts": { "build": "webpack" }, }使用scssyarn add style-loade...
关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题
莫名其妙就提示css冲突和顺序问题,而且组件里面的样式和class类名完全不相干,不知道怎么就给你冲突了。顺序都有点莫名其妙,这玩意谁先谁后都无所谓啊。看了好半天github上的issues也没有谁说出个所以然,反正就是大量的警告,18年就有人提出这个问题了,唉,头疼issues目前普遍的解决办法就是忽略这个警告,因为不是真的影响代码的运行。忽略警告打开vue.config.js文件夹,插入以下代码:module.exports = { css: { extract: { ignoreOrder: true }, }, }保存,然后重新打包,不会再提示 冲突和顺序问题了
![关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题](https://mulingyuer-1253375624.cos.ap-guangzhou.myqcloud.com/%E5%9B%BE%E7%89%87%E7%A9%BA%E9%97%B4/%E5%85%B3%E4%BA%8Evue%20cli%E6%89%93%E5%8C%85%E6%8F%90%E7%A4%BA%20chunk%20chunk-ec595700%20%5Bmini-css-extract-plugin%5D%20css%E7%9A%84%E9%A1%BA%E5%BA%8F%E5%92%8C%E5%86%B2%E7%AA%81%E8%AD%A6%E5%91%8A%E7%9A%84%E9%97%AE%E9%A2%9801.jpg!Anti_theft)
vue cli4 打包时自动去除所有console以及白名单
经常漏删console真的很头疼,又不得不重新打包,所以希望有一款能在打包时自动删除console的插件。于是乎,就有了这篇文章。安装yarn add babel-plugin-transform-remove-console --dev安装完毕我们开始使用使用打开_babel.config.js_文件,输入以下代码,没有这个文件就手动创建。let plugins = []; if (process.env.NODE_ENV === 'production') { //正式环境自动删除console plugins.push('transform-remove-console')...
vue cli 指定打包输出的路径
因为有这个需求,所以分享出来,省的百度找到的都是一堆垃圾文章。vue.config.js配置一个属性即可module.exports = { //指定输出路径 outputDir: 'build/dist' }outputDir配置输出的路径,默认是dist,我打包后文件输出到当前目录(vue.config.js相对)下的build目录下的dist文件夹
vue cli4 配置静态cdn资源
对于打包的优化,除gzip和按需引入,就只有cdn是效果最明显的了。首先使用cdn我们要明确一个事实,就是我们cdn加载的文件,他是没有所谓的按需引入的概念,他就是一个完整的包,顶多给你分为基础包、核心包、完整包啥的。所以,引入是定死的,不可能说你用到什么功能自动引入什么功能,那是本地打包才能做到的。就好比如element ui ,本地打包,我可以按需引入,用到什么引入什么,然后生成一个js文件,但是cdn,你要么就引入全部功能,要么就自己本地,只能这么二选一。所以,对于像element ui 这种框架的打包优化,如果你是按需引入,你可能需要调整为完整引入,因为最终打包使用的是cdn资源...
vue 多模块集成,每个模块为一个项目,共用依赖且独立开发,自动引入模块,导航也独立于模块,自动引入
最近遇到一个需求设计一个开发的环境,由于产品本身很庞大,所以需要划分区域开发,每个人负责一个部分,但是又不太想使用官方的那种资源分布的模式,想独立开发,最后整合,且不相互干扰。于是有了这个。[hide]具体要求需要将每个分类单出拆分为一个独立的项目模块,里面有路由、vuex、组件、单页、静态资源等目录。例如:商城:购物车、订单页、商品页、设置页...文章:新建文章、文章列表、修改页、标签页...由于这种分类非常多,所以需要将类似商城、文章这些作为一个模块,每个小组负责一个模块开发,开发vue文件,组件、vuex、路由、静态文件、导航菜单都单独拆分,自己这个项目写一个入口文件,用于资源的调...