如何解决为什么包含和排除外部组件时,我的src的webpack捆绑大小会有所不同?
请注意,这是关于捆绑包中 my 部分大小变化的问题,而不是为什么包含外部库会使整个捆绑包变大的问题。 >
我是webpack的新手,正在寻找确保最小化包大小的方法,同时仍然通过babel和core-js提供我想要的浏览器支持。我正在使用Webpack Visualizer来分析webpack和babel在各种设置下输出包的大小。
当我通过webpack的externals
配置从捆绑包中排除正在使用的主要外部库时,我的src
目录的捆绑包大小减少了约5k(总捆绑包是〜16k),这符合我的期望,因为这是一个精简的包装库。但是,当我不排除这些库时,我的src
目录的捆绑包最小为〜31k(总捆绑包为〜71k)。
为什么包括外部组件会大大增加非外部组件的捆绑尺寸?请参阅下面的分析仪截图。代码位于here,我的webpack / babel /浏览器配置也都粘贴在下面。
免责声明:这是我第一次尝试为npm编写/打包JavaScript库。
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/zar.js',module: {
rules: [
{
test: /\.(js)$/,exclude: /node_modules/,use: ['babel-loader']
}
]
},optimization: {
// minimize: false,},externals: {
// 'analytics': 'analytics',// '@analytics/storage-utils': '@analytics/storage-utils',// '@analytics/google-tag-manager': '@analytics/google-tag-manager',// 'axios': 'axios',resolve: {
extensions: ['*','.js']
},plugins: [
new CleanWebpackPlugin(),],output: {
library: 'zar',libraryTarget: 'umd',filename: 'zar.bundle.js',path: path.resolve(__dirname,'dist'),};
以及babel /浏览器配置的一些相关部分:
"browserslist": [
"> 0.1%,not dead"
],"babel": {
"presets": [
[
"@babel/preset-env",{
"useBuiltIns": "usage","corejs": "3.6","debug": false
}
]
]
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。