微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

为什么包含和排除外部组件时,我的src的webpack捆绑大小会有所不同?

如何解决为什么包含和排除外部组件时,我的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
        }
      ]
    ]
  }

排除的外部组件(在webpack配置中未注释):

Externals excluded

包含的外部组件(注释如上所示):

Externals included

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。