0

比如:
在main.js里import导入vue,在里也import导入vue;
而index.js又被main.js引用。

4个回答

0

不会 既然是引用
如果vue的路径不发生变化自然不会重复加载

0

不会重复打包,但是针对非全局模块会异步加载

webpack使用了tree-shaking,打包时会先遍历一边你的项目,把依赖的模块取出来,再打包,这个过程中已经去除了不同文件引用的同样的包,这个过程保证了了不管多少个文件引入vue,都只会打包一次。

然后会把全局依赖模块比如 vue 等打包到一个公共文件中,默认为 vendor.*.js
会把你页面依赖的非全局模块,比如你项目的文件,即需要异步加载的模块关系打包进 manifest.*.js。
然后才是真正的项目的文件,分别打包进 d+.*.js

如下图所示。

0

不会,如果你看过打包过之后的文件的话,不仅不会重复加载两边,甚至第二遍读的是第一遍执行结果的缓存。

简单举个例子可以验证:

// timer.js
export const timer = new Date()
//a.js
import { timer } from './time'
console.log(timer)
// index.js
import './a'
import { timer } from './time'
console.log(timer)

如果两次引入 timer 重复加载的话,index.js 的打包结果两次的 log 结果是不同的,但事实上两次的结果是相同的。

下面是 webpack 打包结果的入口函数,会对所有模块通过 id 进行标注,并且加载之后缓存

/******/     var installedModules = {};
/******/
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/
/******/         // 通过 id 缓存模块,如果之前已经通过 __webpack__require__ 加载过,就直接读了缓存
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
            }
0

感谢大家的积极回应,非常感谢!

撰写答案

相似问题