木灵鱼儿
阅读:1000
vue cli异步路由加载原理
webpack会解析路由文件的引入,就算你是一个setTimeout输出的路由配置文件,或者if else
判断的路由配置文件,他都会将你明文书写的路由vue文件打包。为什么?其原理未知,估计并不是解析代码,而且代码关键字的抓取。
如果你是一个api返回的路由配置,webpack的无法准确感知到路由文件的是否被引入,所以它的办法是全部都打包,src目录下的所有vue文件全部会被打包成chunk-2d0b30b7.3576daad.js
这种格式的文件。
其中包裹components目录下的组件,哪怕你的这个组件已经被某个路由页明确引入了,这个路由除了会被打包到这个路由页,还会生成单独的chunk-xx.xx.js
文件
为了解决这个问题,应该是用到了@vue/cli-plugin-babel/preset
这个vue cli的依赖去解析路由配置component
中的import()
方法。
如果我们这么写:
component: () => import(`@/views/${component}`)
@/views
会被明确的解析到,那么只有这个目录下的文件是不可预见的,那么,这个目录下所有文件都会被打包成chunk-xx.xx.js
文件
如果这么写:
component: () => import(`@/${component}`)
@/
成了明确的路径,该路径又等于/src
,所以会出现上述问题,vue文件全部被打包了。
而且vue cli会将所有的文件做成预加载资源设置到index.html文件的head下,格式如下:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/favicon.ico">
<title>hello-world</title>
<link href="/js/chunk-2d0ab09a.9f23883a.js" rel="prefetch">
<link href="/js/chunk-2d0c4244.d539bdf1.js" rel="prefetch">
<link href="/js/chunk-2d0cfa15.60c1fbaf.js" rel="prefetch">
<link href="/js/chunk-2d0d6f02.a0069259.js" rel="prefetch">
<link href="/js/chunk-2d0e4e98.ea1b3b36.js" rel="prefetch">
<link href="/js/chunk-2d0e6875.605d60f3.js" rel="prefetch">
<link href="/js/chunk-680d03d6.dcb41723.js" rel="prefetch">
<link href="/js/app.48e2bbc6.js" rel="preload" as="script">
<link href="/js/chunk-vendors.d3ebd8e9.js" rel="preload" as="script">
</head>
为了解决这个问题,我们可以关闭这个功能
vue.config.js
module.exports = {
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
}
}
这样就可以解决这个问题。
那么webpack怎么知道这个路由加载这个js文件呢?
推测:
webpack会根据当前文件的路径生成hash值,且会有一个路径与哈希的查询表,而路由里面的import()
方法会被特殊处理,拿到路径之后,会去查询查询表,得到一个hash值,然后通过固定的打包文件名格式,拼接成正确的src地址,然后通过创建script元素的方式,下载这个js文件。
var map = {
"./Home": [
"bb51",
"Home"
],
"./Home.vue": [
"bb51",
"Home"
]
};
bb51就是hash值,后面的home取决于用户的配置,默认chunk-xx.xx.js
格式的文件,用户可以通过webpack魔术语法改变js的文件名:
import(/* webpackChunkName: "[request]" */`@/views/${component}`);
/* webpackChunkName: "[request]" */
中[request]
为webpack预设的一个关键词,表示引入的文件名,所以这里的chunk
就变成了Home
。
除了这个名字还有hash值,这个hash是用于防止js文件缓存用的,hash也是可以用户配置的,一般只有生产模式打包才有。
最终所有的参数都会在打包生成的app.js
中以这种形式出现:
function jsonpScriptSrc(chunkId) {
return __webpack_require__.p + "js/" + ({
"Home": "Home"
}[chunkId] || chunkId) + "." + {
"Home": "f2ac4836"
}[chunkId] + ".js"
}
这个函数就是拼接文件src的方法,最终通过script元素引入。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
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: [ ...省略...
关于 vue cli 的Network unavailable的问题分析以及修复方式
发现公司的项目,不管是vue2还是vue3,不管是新创建的还是旧项目,启动后Network永远是unavailable;就很离谱,导致每次想要局域网测试,只能手动在devServer中配置public属性,设置一个固定的本地ip地址。但是,你的ip地址并不是别人的ip地址,那么就会导致如果不小心上传了vue.config.js;那么同事一拉,哦吼,不懂得就说,哎呀,我的项目怎么启动不了了。这就很蛋疼了,所以我分析了一下这个问题的原因。首先,我的电脑的环境是没有问题的,网卡也是没有问题的,vue cli早就支持多个网卡了,所以多网卡问题就可以忽略。其实主要原因是因为一个不合法的ipv4地址...

vue cli4 修改静态html的 %= htmlWebpackPlugin.options.title % 默认值
在默认初始化好的vue cli项目,public目录下的index.html文件,他的title使用的是一种ejs语法:<title><%= htmlWebpackPlugin.options.title %></title>接收的是htmlWebpackPlugin对象上,options的title。一般情况,省事一点,直接把这个title给改成静态就完事了!<title>静态标题</title>但是,好像少了点什么,能不能不改动这个就能改标题呢?当然是可以的,我们需要配置下vue.config.jsvue.config.js...
vue cli4 全局scss变量技巧
今天啃了下官方文档,加上之前也配置到webpack的,有一些经验,我觉得官方可能有对应的方式,毕竟在webpack中我们只需要在sass-loader配置中就可以加入全局scss了,都不用安装啥插件。于是乎,果然,官方有,但是文档很蛋疼,你能看懂引入单个全局,没有多个全局的示例,索性自己写个笔记了。vue.config.jsmodule.exports = { css: { loaderOptions: { scss: { prependData: ` @import "~@/base/assets/scss/glob...
关于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 cli 指定打包输出的路径
因为有这个需求,所以分享出来,省的百度找到的都是一堆垃圾文章。vue.config.js配置一个属性即可module.exports = { //指定输出路径 outputDir: 'build/dist' }outputDir配置输出的路径,默认是dist,我打包后文件输出到当前目录(vue.config.js相对)下的build目录下的dist文件夹
vue 路由跳转使用新建页面打开
今天遇到这么一个需求,官网的个别页面需要新建页面打开,但是这个页面我是配置的路由。一直以来,我以为路由的跳转只能就是在当前页面进行,特别是我跳转路由使用的都是路由name属性。接到这个请求我有点懵逼了,哈哈。。解决方法router-link元素默认生成的是一个a元素,仔细查看你会发现a元素的href是带有路径链接的,哪怕你跳转的:to="{name:xxx}"使用的是路由name。它最终生成的a元素,href依旧是路由的path,所以,既然他能生成路径,那么我们只需要给他加上a元素的attr属性target即可。<router-link :to="{n...
elment ui el-backtop使用教程
饿了么ui的返回顶部,官方的文档非常不上心,写的那个无法使用,因为默认那个示例里面,他用了target属性,然而实际上,如果你没啥定制化的滚动条,而是body的滚动条,那么target就不需要设置。<!-- 返回顶部 --> <el-backtop> <i class="el-icon-arrow-up"></i> </el-backtop>这样就行了,效果ok,不会不显示,滚动效果也是有的。里面的i是我自定义图标,这个看下文档就明白了。
vue cli4 预渲染生成静态html文件,seo优化,prerender-spa-plugin
当我们使用vue去创建一个官网的时候,或者是其他传统类型的html,就会触碰到vue的痛点,他没有seo优化。因为所有的html全是js生成,你打包出来的文件,最终也只是一个简单的index.html,里面可以说什么都没有。这样的话是不利于爬虫抓取的,所以我们需要进行预渲染。目前我将预渲染分为两种:服务器渲染 ssr本地打包渲染服务器渲染ssr可能很多人不太清楚怎么回事,其实只要知道node后台服务搭建,那就肯定是知道的,因为所有的node框架,他都绕不过一个知识点,就是模板语法渲染html页面,这个就是所谓的ssr了。可以理解成node的php写法吧。这个由于目前还未遇到,而且之前学n...