webpack5打包后体积更大了是为什么

为什么我用webpack5打包之后，项目更大了？

目录结构是这样的

img

index.html

img

index.js

img

index.less

img

webpack.config.js


const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "built.js",
    path: resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        // 处理图片资源  webpack5图片新打包方法
        test: /\.(jpg|png|gif)$/,
        // webpack5中使用assets-module（url-loader已废弃）
        type: "asset",
        parser: {
          dataUrlCondition: {
            // 小于15kb的图片转换成base64（一般建议0-12kb的转换成base64） 注意：webpack这里没有对图片进行压缩，原来是多大就是多大（经过实测）
            maxSize: 15 * 1024,
            //             base64
            // 优点
            // base64格式的图片是文本格式，降低了资源服务器的损耗。
            // 网页中使用base64格式的图片时，不再请求服务器调用图片资源，减少了对服务器的请求次数。
            // base64编码的字符串更适合不同平台、不同语言的传输。
            // 缺点
            // base64格式的文本内容较多，存储在数据库中增大了数据库的压力
            // 网页加载虽然不用再请求服务器了，但是base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验
            // base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css, 这比直接缓存图片要查很多，而且一般html改动比较频繁，所以等同得不到缓存效益

          },
        },
        generator: {
          //自定义图片打包的位置和文件夹名
          filename: "img/[name].[hash:6][ext]",
          publicPath: "./",
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
      },
      {
        test: /\.(htm|html)$/i,
        use: {
          loader: "html-withimg-loader",
          options: {
            esModule: false,
          },
        },
      },
    ],
  },
  plugins: [
    //功能：默认会创建一个空的HTML，引入打包输出的所有资源(JS/CSS)
    new HtmlWebpackPlugin({
      // 复制./src/index.html文件
      template: "./src/index.html",
    }),
  ],
  mode: "development",
};

然后我去看了一下体积

src

img

build

img

src-index.js

img

build-built.js

img

我看打包后的图片size也是一样的。打包的意义在哪里呢？

https://m.jb51.net/article/118165.htm

src + nodemodual里的代码和build的文件比较大小，或者你的src不引用任何node module的包然后和build里面的比较，如果图片多，打出来的包的确可能变大，很多转成了base64的编码

有几种原因，引入了一些不用的依赖包，给一个参考连接：https://blog.csdn.net/caseywei/article/details/83008485

我觉得这篇博文的思路不错，应该对你有所帮助：https://www.yisu.com/zixun/188552.html
【彻底解决 webpack 打包文件体积过大问题】
另外，下文，是一个【瘦身】的代码示例，也供你参考下：

entry:{ 
 main:'xxx.js'
}
 
plugins:{
 new commonsChunkPlugin({
 name:'commons',
 minChunks:function(module){
  // 下边return参考的vue-cli配置
  // any required modules inside node_modules are extracted to vendor
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0
  )
 }
}) ,
// 以下才是关键
new commonsChunkPlugin({
 name:'charts',
 chunks:['commons'] 
 minChunks:function(module){
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0 && ['jquery.js', 'highcharts.js','echarts'].indexOf( module.resource.substr(module.resource.lastIndexOf('/')+1).toLowerCase() ) != -1
  )
 }
}) // 如果愿意，可以再new 一个commonsChunkPlugin
 
}

项目中引用了vue、vue-router、axios、element-ui、qs等第三方库，导致打包后文件体积过大。
https://blog.csdn.net/Afra_bd/article/details/100662351
这篇文章详细得写了，希望对你有所帮助