在多个文件中import同一个文件,webpack会多次打包吗

最近自己在练习写React,Vue的时候,会在不同的子组件中多次import同一个文件,例如:import React from 'react'import Vue from 'vue',引入的次数多了慢慢让我产生了疑惑,引入这么多次,webpack会多次打包吗?直觉告诉我webpack并不傻,不会愚蠢的打包多次使打包后的文件异常臃肿,如果不会的话为什么不会呢?怀着好奇心在谷歌搜索很久也没有找到让我信服的的答案,于是我自己做了个实验(源码),来证明自己的猜想:

1.模拟react/vue环境

第一步是安装相关webpack、babel等相关依赖以及建好目录 webpack设置:

//webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react'
      },
    ]
  }
}
复制代码

package.json所需依赖:

//package.json
{
  "name": "test",
  "version": "0.0.1",
  "devDependencies": {
    "webpack": "^1.14.0"
  },
  "dependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0"
  }
}
复制代码

其他用于测试的文件:

//demo.js--相当于vue
export default {
  test(argu) {
    console.log(argu)
  }
}

//test1.js --相当于某个组件

import demo from './demo'

export default {
  test1() {
    demo.test(1)
  }
}

//test2.js --相当于另一个组件
import demo from './demo'

export default {
  test1() {
    demo.test(2)
  }
}

//add.js --入口文件

import Test1 from './test1'
import Test2 from './test2'

Test1.test1()
Test2.test2()
复制代码

我在test1.js,test2.js中都引入demo.js,并且exoprt 出依赖demo.js的方法,然后再在app.js中引入test1.js,test2.js webpack打包后打开bundle.js,找到demo部分。

我们发现在 bundle.js中引入的文件都被分成了带有序号(num)的“代码片”,通过 __webpack_require__(num)来引入对应的模块,而我们 import两次用来测试的 demo.js也只是被打包成了序号为 2的代码块,由此我们可以推论出:

不同文件中多次import同一个文件,webpack并不会多次打包,只会在打包后的文件中会多次引用打包后的该文件对应的函数。

问题终于搞清楚了,很舒服!!?

转载于:https://juejin.im/post/5a30fe686fb9a04506719ebb

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值