webpack 打包工具的性能优化

最新推荐文章于 2024-07-29 09:53:05 发布
最新推荐文章于 2024-07-29 09:53:05 发布
阅读量374 收藏 1
点赞数
分类专栏： 前端开发 webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34703156/article/details/116645578
版权

webpack打包优化

 

对于什么是webpack,这里我就不多做解释，要是你还不知道，那本片文章就不适合现在的你阅读。

 

webpack5 基本配置

我们先来看一份基本的配置，基于webpack5的webpack.confing.js文件。

/*
* webpack.confing.js
*/
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 模式
  mode: "development",
  // 入口
  entry: "./src/index.js",
  // 出口
  output: {
    filename: "built.js",
    path: resolve(__dirname, "build"),
    // 自定义输出 静态资源文件名(图片)
    assetModuleFilename: "assets/[hash][ext]",
  },
  // 模块
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/,
        // 使用loader对文件进行处理
        /**
         * use数组中的执行顺序是 从右到左  从下到上 依次执行
         * style-loader  创建style标签，将样式文件引入到header中
         * css-loader 将css模块变成commonjs模块加载到js中， 文件内容是样式字符串
         */
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          // 将less文件编译成css文件
          // 需要下载 less-loader和less
          "less-loader",
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        // webpack 5 内置了资源类型，已经废弃了之前的 url-loader 和 file-loader
        type: "asset/resource",
      },
      {
        test: /\.html$/,
        // 处理html中的图片文件 引入img文件进而让url-loader处理
        loader: "html-loader",
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
  // 插件
  plugins: [
    // HtmlWebpackPlugin
    // 默认会创建一个空的html文件，会自动引入打包完成的所有资源。
    // 需要有结构的html文件
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  /**
   * 下载 yarn add webpack-dev-server --dev
   * 运行  npx webpack serve
   */
  devServer: {
    // 项目构建后的路径
    contentBase: resolve(__dirname, "build"),
    // 自动打开浏览器
    open: true,
    // 端口号
    port: 5555,
    // 开启gzip压缩
    compress: true,
  },
};
复制代码

上面的代码是我们这篇文章的最基础的代码，后边的打包优化就是基于这个文件来进行配置的。

HMR 热更新

模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中，替换、添加或删除 模块，而无需重新加载整个页面。

优点：

  1. 保留在完全重新加载页面期间丢失的应用程序状态。
  2. 只更新变更内容，以节省宝贵的开发时间。
  3. 在源代码中 CSS/JS 产生修改时，会立刻在浏览器中进行更新，这几乎相当于在浏览器 devtools 直接更改样式。

问题图片

HRM问题.gif

我们可以从上图看到，我们在改变样式的时候，我们的js文件重新执行了一遍，这样对于我们的项目来说是一个问题，我们的优化方向是改变那个文件，只有该文件重新加载。

代码

根据上边的问题，我们只需要改变devServer处的代码。

/*
* webpack.confing.js
*/
...
module.exports = {
...
  devServer: {
    // 项目构建后的路径
    contentBase: resolve(__dirname, "build"),
    // 自动打开浏览器
    open: true,
    // 端口号
    port: 5555,
    // 开启gzip压缩
    compress: true,
    // 新增---> 开启热更新
    // 模块热替换功能会在程序运行过程中，替换，添加或删除模块，而无需重新加载整个页面。
    hot: true,
  },
};
复制代码

效果图片

 

devtool 源码调试方式

选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。

  1. 对于开发环境的源码调试

    eval-source-map - 初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。

  2. 对于生产环境的源码调试

    (none)（省略 devtool 选项） - 不生成 source map。这是一个不错的选择。

Rule.oneOf 匹配规则

loader的匹配规则。

/*
* webpack.confing.js
*/
...
module.exports = {
...
// 模块
  module: {
    rules: [
      // loader的配置
      {
        oneOf: [
          // 以下的loader只会执行匹配的文件一次。
          {
            test: /\.css$/,
            // 使用loader对文件进行处理
            /**
             * use数组中的执行顺序是 从右到左  从下到上 依次执行
             * style-loader  创建style标签，将样式文件引入到header中
             * css-loader 将css模块变成commonjs模块加载到js中， 文件内容是样式字符串
             */
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.less$/,
            use: [
              "style-loader",
              "css-loader",
              // 将less文件编译成css文件
              // 需要下载 less-loader和less
              "less-loader",
            ],
          },
          {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            // webpack 5 内置了资源类型，已经废弃了之前的 url-loader 和 file-loader
            type: "asset/resource",
          },
          {
            test: /\.html$/,
            // 处理html中的图片文件 引入img文件进而让url-loader处理
            loader: "html-loader",
          },
          {
            // 处理其他资源
            exclude: /\.(html|js|css|less|png|svg|jpg|jpeg|gif)$/i,
            type: "asset/resource",
          },
        ],
      },
    ],
  },
...
}
复制代码

如此写法，在打包时loader的匹配将提高速度。

文件缓存

在生产环境时，我们可以将我们打包的css和js等资源缓存到浏览器中，以提高我们第二次进入的页面是的速度。所以我们得对webpack.confing.js进行配置，对js文件和css文件和图片文件进行配置缓存。

首先我们得下载如下loader:

yarn add babel-loader @babel/core @babel/preset-env mini-css-extract-plugin --dev

优化步骤

  1. 将css文件从打包文件中提取为单独的文件。
  2. 对js文件使用babel缓存。

提取css并文件资源缓存

/*
* webpack.confing.js
*/
...
// 新增插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
...
// 模式
mode: "production",
output: {
    filename: "built.[contenthash:10].js",
    ...
  },
...
  // 模块
  module: {
    rules: [
      // loader的配置
      {
        oneOf: [
          // 以下的loader只会执行匹配的文件一次。
          {
            test: /\.css$/,
            // 将 style-loader 替换
            use: [MiniCssExtractPlugin.loader, "css-loader"],
          },
          {
            test: /\.less$/,
            use: [
            // 将 style-loader 替换
              MiniCssExtractPlugin.loader,
              "css-loader",
              "less-loader",
            ],
          },
         ...
         // 新增js的loader
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env"],
                // 开启babel缓存
                // 第二次构建时，会读取之前的缓存
                // 用来缓存 loader的执行结果。之后的webpack 构建，将会尝试读取缓存，
                // 来避免在每次执行时，可能产生的、高性能消耗的 Babel 
                // 重新编译过程(recompilation process)。
                cacheDirectory: true,
              },
            },
          },
        ],
      },
    ],
  },
  // 插件
  plugins: [
    ...
    //新增插件
    new MiniCssExtractPlugin({
      filename: "css/built.[contenthash:10].css",
    }),
  ],
};
复制代码

  1. hash: 每次wepack构建时会生成一个唯一的hash值。

    • 问题: 因为js和css同时使用一个hash值。
    • 如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）

  2. chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样。

    • 问题: js和css的hash值还是一样的
    • 因为css是在js中被引入的，所以同属于一个chunk

  3. contenthash: 根据文件的内容生成hash值。

    • 不同文件hash值一定不一样，让代码上线运行缓存更好使用。

新增jsloader并设置缓存

/*
* webpack.confing.js
*/
...
module.exports = {
...
  // 模块
  module: {
    rules: [
      // loader的配置
      {
        oneOf: [
         ...
         // 新增js的loader
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env"],
                // 开启babel缓存
                // 第二次构建时，会读取之前的缓存
                // 用来缓存 loader的执行结果。之后的webpack 构建，将会尝试读取缓存，
                // 来避免在每次执行时，可能产生的、高性能消耗的 Babel 
                // 重新编译过程(recompilation process)。
                cacheDirectory: true,
              },
            },
          },
        ],
      },
    ],
  },
...
};
复制代码

接下来我们书写测试代码。新建server.js文件，创建新的服务器进行测试。下载express框架。

yarn add express --dev

/*
* server.js
*/
const express = require("express");

const server = express();

// 缓存一个小时
server.use(express.static("build", { maxAge: 1000 * 3600 }));

server.listen(5555, () => {
  console.log("服务器启动成功！", "http://localhost:5555/");
});
复制代码

检查缓存步骤

  1. 进行webpack打包 webpack
  2. 启动服务器 node server.js
  3. http://localhost:5555/

 

 

tree shaking 去除无用代码

使用前提

  1. 必须使用ES6模块化
  2. 开启production环境

优点： 在打包生产环境时，可以将我们未使用的代码进行忽略，从打包文件中删除我们未使用的代码，减小打包文件的体积。

tree shaking 只要我们满足前面的两个前提，webpack在打包时我自动进行无效代码的删除。

新增测试文件

/*
* testTreeShaking.js
*/
export const test1 = () => {
  console.log("test1");
};

export const test2 = () => {
  console.log("test2");
};
复制代码

修改文件

/*
* index.js
*/
...
import { test1 } from "./testTreeShaking";
test1();
// 未引入test2函数。打包时会忽略。
复制代码
/*
* webpack.confing.js
*/
...
module.exports = {
...
// 修改打包模式
mode: 'production',
...
};
复制代码

package.json中配置

/*
* ackage.json
*/
"sideEffects": false 
// 没有副作用（都可以进行tree shaking）
// 可能会把css / @babel/polyfill （副作用）文件干掉
"sideEffects": ["*.css", "*.less"]
复制代码

webpack打包，查看打包文件如下图：

image.png

可以看到，test2函数并没有打包进入打包文件。

code Split 代码分割

代码分割分为三种：

  1. 多入口文件会自动进行代码分割
  2. optimization.splitChunks 控制代码分割
  3. optimization.splitChunks + import() 进行代码分割

优点： 进行代码分割可以有效拒绝js文件过于庞大。

多入口文件会自动进行代码分割

/*
* webpack.confing.js
*/
...
module.exports = {
...
entry: {
    // 多入口：有一个入口，最终输出就有一个bundle
    index: "./src/index.js",
    test: "./src/testTreeShaking.js",
  },
...
};
复制代码

webpack打包查效果，如下图：

image.png

optimization.splitChunks控制代码分割

/*
* webpack.confing.js
*/
...
module.exports = {
...
// 新增代码
optimization: {
    /*
    1. 可以将node_modules中代码单独打包一个chunk最终输出
    2. 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk
  */
    splitChunks: {
      //这表明将选择哪些 chunk 进行优化。当提供一个字符串，有效值为 all，async 和 initial。
      //设置为 all 可能特别强大，因为这意味着 chunk 可以在异步和非异步 chunk 之间共享。
      chunks: "all",
    },
  },
...
};
复制代码

webpack打包查效果，如下图：

image.png

optimization.splitChunks + import() 进行代码分割

/*
* webpack.confing.js
*/
...
module.exports = {
...
// 新增代码
optimization: {
    /*
    1. 可以将node_modules中代码单独打包一个chunk最终输出
    2. 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk
  */
    splitChunks: {
      //这表明将选择哪些 chunk 进行优化。当提供一个字符串，有效值为 all，async 和 initial。
      //设置为 all 可能特别强大，因为这意味着 chunk 可以在异步和非异步 chunk 之间共享。
      chunks: "all",
    },
  },
...
};
复制代码
/*
* index.js
*/
/*
  通过js代码，让某个文件被单独打包成一个chunk
  import动态导入语法：能将某个文件单独打包
*/
import("./testTreeShaking").then(
  (res) => {
    console.log("res", res);
    res.test1();
  }
);

复制代码

webpack打包查效果，如下图：

image.png

文件懒加载 预加载

区别

  1. 使用文件的再加载
  2. 浏览器空闲时先进行加载

修改文件

/*
*index.html
*/
...
<button id="btn">加载testTreeShaking文件</button>
...
复制代码
/*
*index.js
*/
console.log("加载index文件");
复制代码
/*
*testTreeShaking.js
*/
export const test1 = () => {
  console.log("test1");
};

export const test2 = () => {
  console.log("test2");
};
console.log("加载index文件");
复制代码

文件懒加载

/*
*index.js
*/
console.log("加载index文件");
document.getElementById("btn").onclick = function () {
  // 懒加载：当文件需要使用时才加载
  import("./testTreeShaking").then(({ test1 }) => {
    test1();
  });
};
复制代码

懒加载效果图

懒加载.gif

预加载

/*
*index.js
*/
console.log("加载index文件");
document.getElementById("btn").onclick = function () {
  // 预加载 prefetch：会在使用之前，提前加载js文件
  // 正常加载可以认为是并行加载（同一时间加载多个文件）
  // 预加载 prefetch： webpackPrefetch 等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
  import(/* webpackPrefetch: true */ "./testTreeShaking").then(({ test1 }) => {
    test1();
  });
};
复制代码

预加载效果图

预加载.gif

PWA 渐进式网络应用程序

PWA 可以用来做很多事。其中最重要的是，在离线(offline)时应用程序能够继续运行功能。这是通过使用名为 Service Workers 的 web 技术来实现的。

淘宝的PWA效果图

添加 workbox-webpack-plugin 插件，然后调整 webpack.config.js 文件：

yarn add workbox-webpack-plugin --dev

修改webpack.confing.js

/*
* webpack.confing.js
*/
...
// 新增插件
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
module.exports = {
...
  // 插件
  plugins: [
    ...
    //新增插件
    new WorkboxWebpackPlugin.GenerateSW({
      /*
        1. 帮助serviceworker快速启动
        2. 删除旧的 serviceworker

        生成一个 serviceworker 配置文件~
      */
      clientsClaim: true,
      skipWaiting: true,
    }),
  ],
};
复制代码

注册 Service Worker

/*
* index.js
*/
/*
   sw代码必须运行在服务器上
      --> nodejs
      -->
        npm server 启动服务器，将build目录下所有资源作为静态资源暴露出去
*/
// 注册serviceWorker
// 处理兼容性问题
if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker
      .register("/service-worker.js")
      .then(() => {
        console.log("sw注册成功了~");
      })
      .catch(() => {
        console.log("sw注册失败了~");
      });
  });
}
复制代码

接下来我们将之前的server.js文件复制过来直接来使用：

  1. 先进行打包
  2. node server.js 启动服务器
  3. http://localhost:5555/

 

 

多进程打包

yarn add thread-loader --dev

修改webpack.confing.js文件：

/*
* webpack.confing.js
*/
...
module.exports = {
...
  // 模块
  module: {
    rules: [
      // loader的配置
      {
        oneOf: [
         ...
         // 新增js的loader
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
              /* 
                新增代码
                开启多进程打包。 
                进程启动大概为600ms，进程通信也有开销。
                只有工作消耗时间比较长，才需要多进程打包
              */
              {
                loader: "thread-loader",
                options: {
                  // 产生的 worker 的数量，默认是 (cpu 核心数 - 1)，或者，
                  // 在 require('os').cpus() 是 undefined 时回退至 1
                  workers: 2, // 进程2个
                },
              },
              ...
            ],
          },
        ],
      },
    ],
  },
...
};
复制代码

运行webpack可以查看效果，因为这个多进程打包启动需要600ms，所以比较适合代码体量大一点的项目。

未开启多进程打包效果图

image.png

开启多进程打包效果图

image.png

externals

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

修改webpack.confing.js文件，添加externals属性

/*
* webpack.confing.js
*/
...
module.exports = {
...
  externals: {
    jquery: "jQuery",
  },
};
复制代码

选择JQ的CDN链接，添加到index.html

免费CDN地址

/*
* index.html
*/ 
<!DOCTYPE html>
<html lang="zn">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>webpack打包优化</title>
  <!-- 新增代码 -->
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
  <h1>webpack 打包优化</h1>
  <div class="color_1"></div>
  <div class="color_2"></div>
  <img src="./img/zp.jpg" />
</body>

</html>
复制代码
/*
* index.js
*/
import $ from "jquery";
console.log("$", $);
复制代码

webpack打包进行测试。

 

 

 

  

 

HURRICANE_FAST
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack性能优化
weixin_44652065的博客
03-01 3838
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
webpack打包工具及原理
m0_62877814的博客
02-13 2115
webpack打包工具原理及特性分析
webpack 打包 性能优化
purple_lumpy的博客
09-08 331
当我们在打包一些大的项目的时候，会发现，打包的时间非常非常的长。 这时候除了等待，我们还可以思考如何提高webpack 打包效率。 比如下面几个点： 1. 版本更新（技术迭代） 升级 webpack / node / npm / yarn 版本 2. 尽可能少的模块上应用 Loader 如下，我们通过设施exclude，使node_modules 中的代码，不用load...
【webpack】使用useless-files-webpack-plugin插件清理无用文件
最新发布
沧海一比特的博客
07-29 216
使用useless-files-webpack-plugin插件自动检测哪些是无用的文件
如何优化webpack打包速度
路人贾！
07-12 1952
如何优化webpack打包速度
Webpack系列——打包的性能优化
Smart_J_King的博客
01-18 1244
1.跟上技术的迭代（Node, Npm, Yarn） 对Webpack、Node、Npm、Yarn等技术进行版本的升级，相关技术的版本更新，官网都会做出优化，升级技术可以一定程度的提高打包的性能 2.在模块上尽可能少的应用 Loader 合理的使用 exclude / include 可以降低使用 loader 的频率从而提高打包速度，如 exclude: /node_modules/ 因为 node_modules 中的代码是已经被转换过的代码，可以不必使用 loader 做二次转换。也即尽可能的让
webpack打包优化指南
weixin_55846296的博客
07-14 1980
目前所有公司项目的代码量都比较大，打包出来的文件会很大，甚至导致打包压缩代码时内存不足，页面加载速度也较慢。
使用webpack打包原生小程序并优化对小程序的一些功能点进行优化
08-10
总结，Webpack打包微信小程序能带来更好的代码管理、优化和维护性。通过合理的配置和使用各种插件，可以有效提高小程序的性能和用户体验。然而，需要注意的是，过度的优化也可能带来反效果，应根据实际项目需求来...
webpack打包优化详解
为了WLB努力
05-19 1188
先简单总结一下，优化Webpack打包可以通过多种方式来提高性能和减小文件大小。：将代码拆分成多个小块，使得在加载页面时只加载必要的代码。Webpack提供了多种代码分割的方法，如使用import()函数、插件等。：将不需要立即加载的模块延迟加载，提高页面初次加载速度。通常与代码分割一起使用。：使用Webpack的或等插件来压缩和混淆JavaScript代码，减小文件大小。：使用url-loader或来处理图片，可以将小图片转换为Data URL，或者通过图片压缩工具来减小图片大小。：通过。
浅谈webpack性能榨汁机(打包速度优化)
10-17
首先，需要明确一点，Webpack打包速度优化的核心思路在于减少打包过程中的计算量，降低I/O操作次数，以及合理利用多线程等技术手段。 **DLL插件配置** 作者提到了对项目中DLL插件的配置，即使用dll-loader将第三方...
Webpack打包实例测试代码
03-28
Webpack 是一个现代JavaScript应用程序的静态模块打包工具。它在开发过程中扮演着重要角色，通过将各种资源（如JavaScript、CSS、图片等）转换并打包成更小、更优化的文件，提高了网页应用的加载速度和整体性能。在...
webpack未使用：检查前端代码中不再使用的文件资产
02-05
webpack未使用 检查前端代码中不再使用的文件/资产。 使用webpack --json的输出来查看捆绑中实际使用的文件，并列出不需要的文件。 用法： # install webpack-unused npm install -g webpack-unused # run webpack using your normal webpack config etc # with the --json switch to output the stats.json, and pipe to webpack-unused # unused files in the cwd will be li
Webpack性能优化
富朝阳的博客
01-04 2465
最近接到一个老的项目，使用webpack构建的，构建打包居然需要11分钟，也就意味着每次上线至少在12分钟以上，每次上线简直就是折磨，明明可以早15分钟跑路，实在忍不了了，开干，卷起来，下面我记录了此次优化的一些方法，供大家参考。当然不仅仅路由可以按需加载，对于loadash这种大型类库同样可以使用这个功能。按需加载的代码实现这里就不详细展开了，因为鉴于用的框架不同，实现起来都是不一样的。当然了，虽然他们的用法可能不同，但是底层的机制都是一样的。都是当使用的时候再去下载对应文件，返回一个Promise，当。
webpack打包构建之性能优化
weixin_39531576的博客
11-30 113
1 写es6时需要转换工具babel，我们可以只需src目录上转换 rules:[ { //js文件才使用babel test:/\.js$/, loader:'babel-loader', //只在src文件夹下查找 include:[resolve('src')]， //不会去查找的路径
webpack实现的性能优化
xinxin_csdn的博客
04-28 190
内容更新
Webpack之性能优化篇
张印的博客
08-26 4261
Webpack之性能优化篇 性能优化概述 本文所讲的性能优化主要体现在三个方面： 构建性能 这里所说的构建性能，是指在开发阶段的构建性能，而不是生产环境的构建性能; 优化的目标: 降低从打包开始，到代码效果呈现到页面所需要的时间。 传输性能 传输性能是指，打包后的JS代码从服务器传输到用户浏览器经过的时间。 在优化传输性能时要考虑到： 总传输量：所有需要传输的文件内容加起来，就是总传输量；文件数量：当访问页面时，需要传输的JS文件数量，文件数量越多，http请求越多，响应速度越慢；浏览器缓存：
Webpack打包优化常见的几种方案
guxin_duyin的博客
07-02 9287
webpack
十种Webpack的优化方式
一个不掉头发的资深小白
08-10 4569
通过以上这些优化策略，可以显著提升Webpack的构建性能，减少打包后文件的体积，加快项目的加载速度，从而提升用户体验。使用Webpack的插件如MiniCssExtractPlugin来提取CSS代码，使用babel-loader的缓存机制等，以减少构建时间和加载时间。通过配置Webpack的Tree Shaking功能，只保留项目中实际使用到的代码，剔除未使用的代码，减少打包后的文件大小。通过配置Webpack的代码分割功能，将项目代码分割成多个块（chunks），并且在需要的时候按需加载。
【webpack】useless-files-webpack5-plugin\ useless-files-webpack-plugin
沧海一比特的博客
11-02 614
使用useless-files-webpack-plugin检查项目中的无用文件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值