Webpack5相关知识点（二）- 优化（2）- 减少代码体积

最新推荐文章于 2024-08-23 08:35:17 发布

JHY97

最新推荐文章于 2024-08-23 08:35:17 发布

阅读量365

点赞数 1

分类专栏：打包工具文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/JHY97/article/details/125212831

版权

打包工具专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、Tree Shaking

Tree Shaking 是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。

注意：

Tree Shaking 依赖 ES Module。
Webpack 已经默认开启了这个功能，无需其他配置。

二、Babel

Babel 为编译的每个文件都插入了辅助代码，使代码体积过大

@babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用

2.1 下载包

npm i @babel/plugin-transform-runtime -D

2.2 配置

          {
            test: /\.m?js$/,
            include: path.resolve(__dirname, "../src"),
            use: {
              loader: "babel-loader",
              options: {
                cacheDirectory: true,
                cacheCompression: false, 
                plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
              },
            },
          },

三、Image Minimizer

开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢

注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。

image-minimizer-webpack-plugin: 用来压缩图片的插件

3.1 下载包

npm i image-minimizer-webpack-plugin imagemin -D

无损压缩：

npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

有损压缩：

npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

注意：有时候安装是可能出现报错下载失败，需要多尝试几次

3.2 配置

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  // 省略...
  plugins: [
      // 压缩图片
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
  },