Webpack 5的新特性：Asset Modules与Dynamic Import

于 2024-09-26 17:26:17 发布
阅读量803 收藏 16
点赞数 20
文章标签： webpack 前端 node.js vue.js 面试 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_86337335/article/details/142566903
版权

Webpack 5 引入了许多新特性，其中 Asset Modules 和 Dynamic Import 是两个非常重要的特性。这些特性极大地提高了 Webpack 的灵活性和性能。

Asset Modules

Asset Modules 是 Webpack 5 中引入的一种新的模块类型，用于处理各种类型的静态资源文件（如图片、字体、视频等）。Asset Modules 可以自动处理资源文件的加载和打包，使得开发过程更加简单。

Asset Modules 类型

Asset Modules 支持以下几种类型：

  • Asset Module: 基础类型，用于处理静态资源文件。
  • Asset Resource Module: 处理外部资源文件，不会被包含在最终的输出文件中。
  • Asset Inline Module: 将小文件直接嵌入到输出文件中，而不是作为单独的文件。
  • Asset URL Module: 生成一个 URL 指向资源文件。
配置示例

假设我们有一个项目结构如下：

src/
  - assets/
    - images/
      - logo.png
    - fonts/
      - Roboto-Regular.ttf

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // 处理图片文件
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext]'
        }
      },
      // 处理字体文件
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]'
        }
      }
    ]
  }
};

index.js

import logo from './assets/images/logo.png';
import font from './assets/fonts/Roboto-Regular.ttf';

console.log('Logo:', logo);
console.log('Font:', font);
分析

处理图片文件

  • 使用 type: 'asset/resource' 将图片文件作为独立的资源文件处理。
  • generator 选项指定输出路径和文件名。

处理字体文件

  • 同样使用 type: 'asset/resource' 将字体文件作为独立的资源文件处理。
  • 输出路径和文件名通过 generator 选项指定。
Dynamic Import

Dynamic Import 是一种按需加载模块的方法，可以在运行时动态地导入模块。这有助于减少初始加载时间并提高性能。

动态导入语法
import('./module.js').then((module) => {
  // 使用模块
});
配置示例

假设我们有一个项目结构如下：

src/
  - components/
    - About.js
    - Home.js
    - App.js

App.js

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => this.loadAbout()}>Load About</button>
        <button onClick={() => this.loadHome()}>Load Home</button>
      </div>
    );
  }

  async loadAbout() {
    const About = await import('./components/About');
    console.log(About.default);
  }

  async loadHome() {
    const Home = await import('./components/Home');
    console.log(Home.default);
  }
}

export default App;

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/App.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};
分析

动态导入语法

  • 使用 import() 函数动态导入模块。
  • 返回一个 Promise 对象，可以在 .then() 中处理模块。

Webpack配置

  • optimization.runtimeChunk 选项将运行时代码分离为单独的 chunk。
  • splitChunks 选项用于分割代码块，提高代码复用率。
实际案例分析
Asset Modules 实际案例

假设我们要处理一个复杂的项目，包含多种类型的静态资源文件。

项目结构

src/
  - assets/
    - images/
      - logo.png
      - background.jpg
    - fonts/
      - Roboto-Regular.ttf
      - OpenSans-Regular.ttf
    - videos/
      - intro.mp4

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // 处理图片文件
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext]'
        }
      },
      // 处理字体文件
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]'
        }
      },
      // 处理视频文件
      {
        test: /\.(mp4|webm|ogg)$/,
        type: 'asset/resource',
        generator: {
          filename: 'videos/[name][ext]'
        }
      }
    ]
  }
};

index.js

import logo from './assets/images/logo.png';
import background from './assets/images/background.jpg';
import font1 from './assets/fonts/Roboto-Regular.ttf';
import font2 from './assets/fonts/OpenSans-Regular.ttf';
import video from './assets/videos/intro.mp4';

console.log('Logo:', logo);
console.log('Background:', background);
console.log('Font 1:', font1);
console.log('Font 2:', font2);
console.log('Video:', video);
Dynamic Import 实际案例

假设我们要实现一个动态加载页面的单页应用。

项目结构

src/
  - pages/
    - About.js
    - Home.js
    - Contact.js
  - App.js

App.js

import React from 'react';

class App extends React.Component {
  state = {
    currentComponent: null
  };

  render() {
    const { currentComponent } = this.state;
    return (
      <div>
        <button onClick={() => this.loadPage('About')}>Load About</button>
        <button onClick={() => this.loadPage('Home')}>Load Home</button>
        <button onClick={() => this.loadPage('Contact')}>Load Contact</button>
        {currentComponent && <currentComponent />}
      </div>
    );
  }

  async loadPage(pageName) {
    try {
      const module = await import(`./pages/${pageName}.js`);
      this.setState({ currentComponent: module.default });
    } catch (error) {
      console.error('Error loading page:', error);
    }
  }
}

export default App;

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/App.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};
性能优化
Asset Modules 性能优化

使用 asset/inline 模块类型

  • 对于小文件，可以直接嵌入到输出文件中，减少 HTTP 请求次数。
  • 使用 asset/url 模块类型

生成一个 URL 指向资源文件，适用于较大的文件。

webpack.config.js

module.exports = {
  module: {
    rules: [
      // 处理小图片文件
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/inline',
        generator: {
          filename: 'images/[name][ext]'
        },
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8KB
          }
        }
      },
      // 处理大图片文件
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/url',
        generator: {
          filename: 'images/[name][ext]'
        }
      },
      // 处理字体文件
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]'
        }
      }
    ]
  }
};

index.js

import logo from './assets/images/logo.png';
import background from './assets/images/background.jpg';
import font1 from './assets/fonts/Roboto-Regular.ttf';
import font2 from './assets/fonts/OpenSans-Regular.ttf';
import video from './assets/videos/intro.mp4';

console.log('Logo:', logo);
console.log('Background:', background);
console.log('Font 1:', font1);
console.log('Font 2:', font2);
console.log('Video:', video);
Dynamic Import 性能优化

懒加载 使用 Dynamic Import 实现懒加载，只在需要时加载模块，减少初始加载时间。

预加载和预取 使用 和 提前加载关键资源。

webpack.config.js

module.exports = {
  entry: './src/App.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

App.js

import React from 'react';

class App extends React.Component {
  state = {
    currentComponent: null
  };

  render() {
    const { currentComponent } = this.state;
    return (
      <div>
        <button onClick={() => this.loadPage('About')}>Load About</button>
        <button onClick={() => this.loadPage('Home')}>Load Home</button>
        <button onClick={() => this.loadPage('Contact')}>Load Contact</button>
        {currentComponent && <currentComponent />}
      </div>
    );
  }

  async loadPage(pageName) {
    try {
      const module = await import(`./pages/${pageName}.js`);
      this.setState({ currentComponent: module.default });
    } catch (error) {
      console.error('Error loading page:', error);
    }
  }
}

export default App;
详细代码分析
Asset Modules 代码分析

配置解析

  • test: 匹配文件扩展名。
  • type: 指定模块类型。
  • generator: 指定输出路径和文件名。
  • parser: 设置条件，例如最大大小。

实际应用 在 index.js 中导入资源文件，WebPack 自动处理加载和打包。

webpack.config.js

module.exports = {
  module: {
    rules: [
      // 处理小图片文件
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/inline',
        generator: {
          filename: 'images/[name][ext]'
        },
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8KB
          }
        }
      },
      // 处理大图片文件
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/url',
        generator: {
          filename: 'images/[name][ext]'
        }
      },
      // 处理字体文件
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]'
        }
      }
    ]
  }
};

index.js

import logo from './assets/images/logo.png'; // 内联数据
import background from './assets/images/background.jpg'; // URL
import font1 from './assets/fonts/Roboto-Regular.ttf'; // 资源文件
import font2 from './assets/fonts/OpenSans-Regular.ttf'; // 资源文件
import video from './assets/videos/intro.mp4'; // 资源文件

console.log('Logo:', logo);
console.log('Background:', background);
console.log('Font 1:', font1);
console.log('Font 2:', font2);
console.log('Video:', video);
Dynamic Import 代码分析

配置解析

  • runtimeChunk: 将运行时代码分离为单独的 chunk。
  • splitChunks: 分割代码块，提高代码复用率。

实际应用 在 App.js 中使用 import() 函数动态加载模块。

webpack.config.js

module.exports = {
  entry: './src/App.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

App.js

import React from 'react';

class App extends React.Component {
  state = {
    currentComponent: null
  };

  render() {
    const { currentComponent } = this.state;
    return (
      <div>
        <button onClick={() => this.loadPage('About')}>Load About</button>
        <button onClick={() => this.loadPage('Home')}>Load Home</button>
        <button onClick={() => this.loadPage('Contact')}>Load Contact</button>
        {currentComponent && <currentComponent />}
      </div>
    );
  }

  async loadPage(pageName) {
    try {
      const module = await import(`./pages/${pageName}.js`);
      this.setState({ currentComponent: module.default });
    } catch (error) {
      console.error('Error loading page:', error);
    }
  }
}

export default App;
总结与讨论
Asset Modules 总结

优点

  • 自动处理静态资源文件的加载和打包。
  • 灵活的配置选项，可以根据文件大小选择不同的处理方式。
  • 支持多种类型的静态资源文件。

缺点

  • 需要合理配置，否则可能导致不必要的 HTTP 请求或过大的内联数据。
Dynamic Import 总结

优点

  • 按需加载模块，减少初始加载时间。
  • 提高应用性能，特别是在大型应用中。
  • 支持懒加载和预加载。

缺点

  • 需要合理配置，否则可能导致不必要的代码分割。
  • 需要处理错误情况，例如模块加载失败。
露露在前端
关注
Webpack5正式发布,有哪些新特性
10-14
Webpack5的发布带来了众多新特性和改进，这些变化旨在提高性能、优化打包体积以及提升开发体验。以下是对这些新特性的详细说明： 1. **持久化缓存**：Webpack5 引入了更高效的缓存策略，使得在多次构建之间能更快地...
Webpack5 动态导入按需加载
有趣的小良的博客
08-04 2706
传统上，在Webpack中，我们使用import语句可以在代码中静态地导入模块。这意味着所有的模块都会在构建时被打包到bundle中。然而，动态导入和按需加载允许开发者在运行时根据需要动态地加载模块，减少初始加载时间和资源消耗。减少初始加载时间：只加载当前需要的模块，而不是全部模块。优化代码分割：可将类似功能或依赖关系较弱的模块进行拆分，使得每个chunk更小且更独立。提高用户体验：按需加载可以使应用程序更快地响应用户交互，提升用户体验。
Webpack 运行时代码分析 - 动态加载
发果叁
01-28 1022
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
【 狗拿耗子webpack - require, 一文解决动态加载问题】
最新发布
qq_38428433的博客
08-08 769
我们有个使用场景 ，程序启动时，把文件路径传入，再去加载这个文件。项目整体是采用webpack打包，本以为会顺利，直到…
Webpack5学习笔记（基础篇六）—— Assets资源模块的加载
MRlaochen的博客
12-26 4103
在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并 将它们从 /src 文件夹移动到 /dist 或 /build 目录中。webpack 最出色的功能之一就是，除了引入 JavaScript，还可以内置的资源模块 Asset Modules 引入任何其他类型的文件。 在webpack4的时候以及之前，我们通常是使用file-loader与url-loader来帮助我们加载其他资源类型。 1、Asset Modules Type的四种类型 而webpack5可
第五章（原理篇） 微前端技术之模块联邦与动态加载
球球不吃虾WHR2349博客
01-25 2105
Webpack 5引入了一个革命性的新功能，叫做模块联邦（Module Federation）。模块联邦允许Webpack构建之间的模块共享，它打开了一种新的方式来看待代码的复用和组合，尤其适合在微前端架构中使用。
webpack5资源模块asset
haosicx的博客
05-21 916
文章目录引导资源模块asset module type`asset / resource 导出图片资源`修改asset/resource模块下打包后的资源路径和文件名`asset / inline 资源转化成base64``asset / source 读取资源的内容``asset通用数据类型自动转换` 引导 上一篇讲解了webpack搭建开发环境 有一个问题 到目前为止 项目只能加载JS 但是我们想混合一些其他的资源怎么办呢? – 比如images/ 字体 / 图标等 资源模块asset modu
webpack-样板：:package:明智的webpack 5样板
02-06
:package: webpack样板 使用Babel，PostCSS和Sass的明智的webpack 5样板，具有热门的开发服务器和优化的生产版本。安装克隆此仓库并安装npm。 npm i用法开发服务器npm start 您可以在localhost:8080查看开发服务器。...
react-webpack5-start:react-webpack5-start
04-20
react-webpack5-start 应用 typescript、react、mobx、webpack5 开发环境集成。 软件架构 支持 antd 主题自定义配置 安装教程 下载本包之后 npm install 启动方式： npm start webpack5 相较于之前版本，主要以优化...
webpack5.x:webpack5.x模板
05-04
6. **Asset Modules**：新的Asset Modules特性允许更方便地处理静态资源，如图片和字体，自动处理其大小和格式转换。 二、测试环境与热加载 Webpack 5.x 模板通常包括一个测试环境配置，通过`npm run serve`命令...
webpack5-react:webpack5 +React
04-16
在Webpack5中，引入了一个新的特性——环境变量管理。这个特性允许开发者更好地控制应用程序的行为，根据不同的运行环境（如开发环境、生产环境）来设置和使用特定的变量。这在标题和描述中有所提及。 描述中的"env...
详解webpack import()动态加载模块踩坑
10-18
主要介绍了详解webpack import()动态加载模块踩坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack 模块加载原理
weixin_51175605的博客
08-03 1393
webpack 是一个模块打包器，在它看来，每一个文件都是一个模块。
webpack项目优化高级特性：动态导入、按需加载
weixin_47863904的博客
01-09 341
一般我们常说的按需加载指的是加载数据或者加载图片，但是我们这里所说的按需加载，指的是在应用运行过程中，需要某个资源模块时，才去加载这个模块。而且我们分包的目的中，很重要的一点就是让模块实现按需加载，从而提高应用的响应速度。此时 dist 目录下就会额外多出三个 JS 文件，其中有两个文件是动态导入的模块，另外一个文件是动态导入模块中公共的模块，这三个文件就是由动态导入自动分包产生的。在这个应用的主体区域，如果我们访问的是首页，它显示的是一个文章列表，如果我们访问的是相册页，它显示的就是相册列表。
webpack5学习笔记—基础篇
weixin_44215068的博客
04-21 2130
目录 1. webpack 1.1 Webpack是什么？有什么用？ 1.2 webpack的几个概念 2. webpack的基础使用 3.2.1 安装 3.2.2 webpack配置文件 3.2.3 打包命令 3. 资源模块 resource inline source asset 3. loader 1. 什么是loader 2. 处理css文件 2.1 加载css和less 2.2 抽离和压缩css 3. 图片资源 4. 字体资源 5. 数据资源 1. .
webpack动态加载——懒加载实现
riddle1981的博客
09-29 1709
webpackMode如果不写的话，模块是不会单独打包成一个独立模块的。因为使用本地真实路径，node_modules的相关配置都会失效的。其中symlinks配置是用来标识是否将模块引入解析为真实路径。如果你需要打包的模块是自己用npm link链接的模块记得关闭。对于懒加载来说，不是独立模块是没办法在需要的时候单独加载的。./conf.base.cjs 基础配置。
webpack：2 webpack5模块 asset (图片 字体图标)
qq_36413371的博客
05-11 536
asset允许在不配置其它loader下使用资源文件（字体、图标等）， asset内置模块提供了4个loader asset/resource 发出一个单独的文件并导出URL（等同于file-loader） asset/inline 导出uri数据，（等同于url-loader） asset/source 导出asset源代码（等同于raw-loader） asset 自动导出URI和文件之间选择（等同于使用了limit的file-loader） 在webpack5中使用旧资产（file-loader.
webpack动态加载与打包
m0_65937359的博客
02-11 2619
webpack代码拆分 webpack有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块，在优化了依赖树后，每一个异步区块都作为一个文件被打包。 上下文模块(contextModule) 上下文模块有6种类型，分别为sync/lazy/lazy-once/eager/weak/sync-weak sync：直接打包当前文件，同步加载并执行 lazy：为每个import()导入的模块生成一个可延迟加载(lazy-loadable)的chunk lazy-once：生成一个可满
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值