webpack5减少构建文件体积(五)

一、减少代码体积:Tree Shaking

Tree Shaking 是一个术语,通常用于描述移除 JavaScript 中的没有使用上的代码。
***注意:***它依赖 ES Module。

如何设置

Webpack5已经默认开启了这个功能,无需其他配置。

二、减少代码体积:Babel

Babel 对一些公共方法使用了非常小的辅助代码,比如 _extend。默认情况下会被添加到每一个需要它的文件中。

你可以将这些辅助代码作为一个独立模块,来避免重复引入。

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

如何设置

1、下载包

复制代码
npm i @babel/plugin-transform-runtime -D

2、配置

将plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积 这段加入到babel-loader的属性中。如下所示:

复制代码
{
       loader: "babel-loader",
       options: {
            cacheDirectory: true, // 开启babel编译缓存
            cacheCompression: false, // 缓存文件不要压缩
            plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
        },
}

生产环境与开发环境配置的方法是一样的方式。

三、减少图片压缩体积:Image Minimizer

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

我们可以对图片进行压缩,减少图片体积。
***注意:***如果项目中图片都是在线链接,那么就不需要了。本地项目静态图片才需要进行压缩。

如何设置

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

2、配置

我们以无损压缩配置为例:

(1)首先引入插件:

复制代码
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

(2)引入插件内容

复制代码
 // 压缩图片
      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",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),

3、打包时会出现报错

我们需要安装两个文件到 node_modules 中才能解决

  • jpegtran.exe

需要复制到 node_modules\jpegtran-bin\vendor 下面

jpegtran 官网地址

  • optipng.exe

需要复制到 node_modules\optipng-bin\vendor 下面

OptiPNG 官网地址

相关推荐
冰天糖葫芦12 分钟前
VUE实现数字翻牌效果
前端·javascript·vue.js
南岸月明21 分钟前
我与技术无缘,只想副业搞钱
前端
gzzeason1 小时前
在HTML中CSS三种使用方式
前端·css·html
hnlucky1 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin1 小时前
前端八股-promise
前端·javascript
星语卿1 小时前
浏览器重绘与重排
前端·浏览器
小小小小宇2 小时前
前端实现合并两个已排序链表
前端
yngsqq2 小时前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk2 小时前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan2 小时前
我自建服务器部署了 Next.js 全栈项目
前端