使用默认导入而不是命名导入时,为什么我的ES6 Webpack捆绑包更大?

马克:

我正在使用OpenLayers 6,并使用此表示法导入库的某些部分:

import { Map, View } from 'ol';
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
// More in other files [...]

运行时,我的项目npm run dev得到一个9MB的文件。

为了进行测试,我尝试将这些命名的导入替换为默认的导入:

import Map from 'ol/Map';
import View from 'ol/View';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';

令人惊讶的是,它将我的捆绑文件减少到6MB它的重量减轻了33%,为什么呢?命名导入不应该仅导入模块的必需部分吗?

编辑1

在@Bergi评论之后,可以在此处找到库我使用通过安装的最新版本npmv6.4.2

编辑2

正如@felixmosh答案所指出的那样,运行npm run prod似乎可以减小大小差异。我得到的差值1KB886KB885KB

felixmosh:

摇树是缩小过程的一部分。在开发包中,不应用此过程。

尝试以“生产”模式运行,并比较结果。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Webpack创建单个SPA捆绑包

如何构建从另一个入口点捆绑包导入模块的webpack捆绑包?

如何使用webpack构建缩小和未压缩的捆绑包?

从OSGi捆绑包导入资源

使用webpack捆绑CSS

使用webpack将多个ES6类捆绑到一个文件中,以导入脚本标签

使用webpack时,使用es6命名导入是否会减少捆绑包的大小

使用webpack创建更少的捆绑包

vs代码IntelliSense无法与Webpack捆绑包一起使用

使用Webpack和Babel的ES6动态导入

在webpack.config中使用ES6导入和导出默认值

使用webpack从主捆绑包中排除JSON文件以进行react-lottie

如何使用webpack模块捆绑程序创建单个js文件包-Angular

如何使用webpack-dev-server自动重建捆绑包而无需再次运行命令?

Symfony Webpack Encore:从捆绑包导入.js

如何知道是否可以使用ES6导入语法导入npm包?

Django / Webpack-如何使用Webpack开发服务器提供生成的Webpack捆绑包

Webpack混合了默认导入和命名导入

为什么我的Webpack捆绑包两次包含jQuery?

尝试使用webpack ignorePlugin从最终捆绑包中删除“ react-hot-loader”

webpack捆绑包不允许html识别我的js函数

为什么webpack 4包含单个命名导入的整个文件?

我的lambda函数的Webpack捆绑包具有require语句(实际上不是捆绑包)

如何配置Webpack 5捆绑包以使用全局jQuery?

使用Webpack反应Semantic-ui捆绑包的大小太大

如果不直接使用,则导出的TypeScript类不包含在WebPack捆绑包中

如何在Razor页面中使用Webpack捆绑包中的Vue.js代码?

意外的令牌导入(webpack es6)

如何使用Webpack从捆绑包中排除Mobx和Mobx反应