vue2使用webpack优化打包体积过大、打包慢问题

压缩图片

在本项目中使用了大量图片,打包查看图片所占体积最大,使用image-webpack-loader压缩图片

 chainWebpack(config) {
    // 压缩图片
    config.module
      .rule("images")
      .use("url-loader")
      .tap((options) => ({
        limit: 10240, 
        fallback: {
          loader: require.resolve("file-loader"),
          options: {
            name: "static/img/[name].[hash:8].[ext]",
            esModule: false, //低版本默认为false,高版本默认为true
          },
        },
      }))
      .end()
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        mozjpeg: {
          progressive: true,
          quality: 50,
        }, // 压缩JPEG图像
        optipng: {
          enabled: true,
        }, // 压缩PNG图像
        pngquant: {
          quality: [0.5, 0.65],
          speed: 4,
        }, // 压缩PNG图像
        gifsicle: {
          interlaced: false,
        }, // 压缩GIF图像
      })
      .end()
      .enforce("post"); 
      }

多进程打包

使用happypack

const HappyPack = require("happypack");
const happyThreadPool = HappyPack.ThreadPool({
  size: 6,
}); //线程城池

config.when(process.env.NODE_ENV !== "development", (config) => {
      config
        .plugin("happypack")
        .use(HappyPack)
        .tap((options) => {
          options[0] = {
            id: "babel",
            loaders: ["babel-loader?cacheDirectory=true"],
            threadPool: happyThreadPool,
          };
          return options;
        });
       })

打包去除debugger和console

UglifyJsPlugin

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
config.when(process.env.NODE_ENV !== "development", (config) => {
  config.optimization.minimizer = [
        //比较慢,开发环境关闭
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true, //console
              drop_debugger: true,
              pure_funcs: ["console.log"], //移除console
            },
            // output: {
            //   comments: false, //去掉注释
            //   },
          },
          sourceMap: false,
          parallel: true, //使用多进程并行运行来提高构建速度
        }),
      ];
   })

splitChunks公共模块

  config.optimization.splitChunks({
        chunks: "all",
        cacheGroups: {
          libs: {
            name: "chunk-libs",
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: "initial",
          },
          elementUI: {
            name: "chunk-elementUI",
            priority: 20,
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
          },
          commons: {
            name: "chunk-commons",
            test: resolve("src/components"),
            minChunks: 3,
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      });

整个配置

const path = require("path");
const webpack = require("webpack");
const defaultSettings = require("./src/settings.js");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HappyPack = require("happypack");
const happyThreadPool = HappyPack.ThreadPool({
  size: 6,
}); //线程城池
// const CompressionWebpackPlugin = require("compression-webpack-plugin"); //安装npm i compression-webpack-plugin@5.0.1

function resolve(dir) {
  return path.join(__dirname, dir);
}

const name = defaultSettings.title || "YDCLOUD";
// 开发端口
const port = process.env.port || process.env.npm_config_port || 9528;
// 后台网关地址
const url = process.env.VUE_APP_BASE_API;

module.exports = {
  runtimeCompiler: true,
  lintOnSave: true,
  productionSourceMap: false,
  css: {
    loaderOptions: {
      sass: {
        // additionalData: `@import "~@/YDCLOUD/assets/theme/variable.scss";`
        sassOptions: {
          outputStyle: "expanded",
        },
      },
    },
  },
  // 本地开发环境配置
  devServer: {
    port: port,
    host: "0.0.0.0",
    open: true,

    disableHostCheck: true,
    // 转发代理
    proxy: {
      "/coreframe": {
        target: url,
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/coreframe": "/coreframe",
        },
      }
    },
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery",
      }),
      // new HappyPack({
      //   id: 'happyBabel',
      //   loaders: ['babel-loader?cacheDirectory=true'],
      //   threadPool: happyThreadPool
      // })
    ],
  },
  chainWebpack(config) {
    // 压缩图片
    config.module
      .rule("images")
      .use("url-loader")
      .tap((options) => ({
        limit: 10240, 
        fallback: {
          loader: require.resolve("file-loader"),
          options: {
            name: "static/img/[name].[hash:8].[ext]",
            esModule: false, //低版本默认为false,高版本默认为true
          },
        },
      }))
      .end()
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        mozjpeg: {
          progressive: true,
          quality: 50,
        }, // 压缩JPEG图像
        optipng: {
          enabled: true,
        }, // 压缩PNG图像
        pngquant: {
          quality: [0.5, 0.65],
          speed: 4,
        }, // 压缩PNG图像
        gifsicle: {
          interlaced: false,
        }, // 压缩GIF图像
      })
      .end()
      .enforce("post"); // 表示先执行配置在下面那个loader,即image-webpack-loader

    config.plugin("preload").tap(() => [
      {
        rel: "preload",
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: "initial",
      },
    ]);

    config.plugins.delete("prefetch");
    config.when(process.env.NODE_ENV !== "development", (config) => {
      // 对超过10kb的文件gzip压缩
      // config.plugin("compressionPlugin").use(
      //   new CompressionWebpackPlugin({
      //     test: /\.(js|css|html)$/, // 匹配文件名
      //     threshold: 10240,
      //   })
      // );

      config
        .plugin("happypack")
        .use(HappyPack)
        .tap((options) => {
          options[0] = {
            id: "babel",
            loaders: ["babel-loader?cacheDirectory=true"],
            threadPool: happyThreadPool,
          };
          return options;
        });

      const hRule = config.module.rule("js");
      hRule.test(/\.js$/).include.add(resolve("src")).end();
      hRule.uses.clear();
      hRule
        .use("happypack/loader?id=babel")
        .loader("happypack/loader?id=babel")
        .end();

      config
        .plugin("ScriptExtHtmlWebpackPlugin") // HTML 内联或外部加载脚本支持
        .after("html")
        .use("script-ext-html-webpack-plugin", [
          {
            // `runtime`必须与runtimeChunk名称相同。默认值为`runtime`
            inline: /runtime\..*\.js$/,
          },
        ])
        .end();
      config.optimization.minimizer = [
        //比较慢,开发环境关闭
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true, //console
              drop_debugger: true,
              pure_funcs: ["console.log"], //移除console
            },
            // output: {
            //   comments: false, //去掉注释
            //   },
          },
          sourceMap: false,
          parallel: true, //使用多进程并行运行来提高构建速度
        }),
      ];
      config.optimization.splitChunks({
        chunks: "all",
        cacheGroups: {
          libs: {
            name: "chunk-libs",
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: "initial",
          },
          elementUI: {
            name: "chunk-elementUI",
            priority: 20,
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
          },
          commons: {
            name: "chunk-commons",
            test: resolve("src/components"),
            minChunks: 3,
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      });
      config.optimization.runtimeChunk("single");
    });
  },
};
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了优化webpack打包vue项目,你可以考虑以下几个方面: 1. 使用代码分割:将代码拆分成多个小块,按需加载,减小初始加载的文件大小。可以使用webpack的SplitChunksPlugin插件来进行代码分割。 2. 使用懒加载:对于一些不常用或者较大的模块,可以使用懒加载的方式来延迟加载,减小初始加载的文件大小。可以通过vue-router的异步路由或者webpack的import函数来实现。 3. 压缩代码:使用webpack的UglifyJsPlugin插件来压缩代码,减小文件体积。 4. 使用缓存:通过设置webpack的output.filename和output.chunkFilename选项来生成带有hash的文件名,以便浏览器能够缓存文件,减少重复请求。 5. 图片优化:将图片进行压缩和转换为base64编码,以减小文件大小。可以使用url-loader或者file-loader插件来处理图片。 6. 清除无用代码:使用webpack的Tree Shaking特性去除未使用的代码,减少输出文件体积。 7. 配置合理的Devtool选项:在开发环境中使用sourcemap来方便调试代码,而在生产环境中使用cheap-source-map或者none等选项来减小构建时间和文件大小。 8. 优化打包时的性能:使用happypack插件来多线程处理webpack的loader和babel-loader,使用ParallelUglifyPlugin插件来并行压缩代码,提高构建速度。 以上是一些常见的webpack打包vue项目的优化方法,你可以根据具体情况选择适合你项目的优化策略。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值