webpack打包时使用import引入element,element地址信息不会被打包到budle中而axios就会呢?

Webpack 打包时,对于 import 引入的库(例如 element),其地址信息不会被打包到 bundle 中,这是因为库的地址信息是在运行时动态解析的,而不是在编译时确定的。

当你在代码中使用 import 引入一个库时,Webpack 会将其转换为一个动态的 require 语句,而这个 require 语句会在运行时解析并加载库的模块。因此,库的地址信息不会直接出现在最终的 bundle 中。

相比之下,Axios 是一个提供 HTTP 请求功能的库,它需要在编译时确定其地址信息,因为 HTTP 请求是发生在编译期间而不是运行期间的操作。因此,Axios 的地址信息会被打包到 bundle 中。

总结来说,Webpack 打包时是否将库的地址信息打包到 bundle 中,取决于库的使用方式和编译时的需求。对于运行时动态加载的库,其地址信息不会被打包到 bundle 中;而对于需要在编译时确定地址信息的库(如 Axios),其地址信息会被打包到 bundle 中。
那么webpack打包时如何引入将编译时的库的地址信息不被打包到bundle中??

方式一:在index.html中引入,webpack打包时排除axios打包

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
externals: {
        'axios': 'axios'
    },

方式二:使用import方式引入axios,使用Webpack的alias配置选项来设置库的别名,这样在代码中就可以使用别名来引入模块,而不需要直接使用完整的路径。这样,即使库的地址信息在编译时被解析,也不会被打包到bundle中。


import axios from 'axios'
resolve: {
        alias: {
            '@': resolve('src'),
            'axios': resolve('node_modules/axios/dist/axios.min.js'),
        }
    },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
你的问题是关于使用 webpack 将 splitChunks、axios 和 lodash 单独打包,其他库文件打包到 vendor 组的方法。下面是一个示例 webpack 配置文件,你可以参考一下: ``` const path = require('path'); const webpack = require('webpack'); module.exports = { entry: { main: './src/index.js' }, output: { filename: '[name].[chunkhash].js', path: path.resolve(__dirname, 'dist') }, optimization: { splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendor', chunks: 'all' }, axios: { test: /[\\/]node_modules[\\/]axios[\\/]/, name: 'axios', chunks: 'all' }, lodash: { test: /[\\/]node_modules[\\/]lodash[\\/]/, name: 'lodash', chunks: 'all' } } } }, plugins: [ new webpack.ProgressPlugin() ] }; ``` 上述配置文件,我们使用 optimization.splitChunks.cacheGroups 配置项来定义不同的缓存组。其,vendor 缓存组用于打包其他库文件,而 axios 和 lodash 缓存组则用于单独打包 axios 和 lodash 库。 在每个缓存组,我们可以使用 test 字段来匹配需要打包的模块。比如,使用 /[\\/]node_modules[\\/]/ 表示打包所有在 node_modules 目录下的模块。同,我们还可以使用 name 字段来指定打包后的文件名,chunks 字段来指定使用哪些代码块进行打包。 最后,我们将 optimization.splitChunks.cacheGroups.vendor 缓存组作为公共模块来打包其他库文件,而 axios 和 lodash 缓存组则单独打包对应的库文件。这样做可以有效减少打包后的文件大小,提高页面加载速度。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zero0985

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值