webpack5 import动态导入实现按需加载并给文件统一命名的配置方法

想要实现按需加载，动态导入模块。还需要额外配置：

console.log("hello main");
 
document.getElementById("btn").onClick = function () {
   // 动态导入 --> 实现按需加载  -->then是加载成功要做的处理不处理的话可以不写
 
  import( "./js/math.js").then(({ count }) => {
    console.log(count(2, 1));
  });
};

效果:

如果没有配置命名规则打包后就是这样的随机

1.修改文件

main.js

console.log("hello main");
 
document.getElementById("btn").onClick = function () {
   // 动态导入 --> 实现按需加载  -->then是加载成功要做的处理不处理的话可以不写
  // eslint会对动态导入语法报错，需要修改eslint配置文件
  // webpackChunkName: "math"：这是webpack动态导入模块命名的方式
  // "math"将来就会作为[name]的值显示。
  import(/* webpackChunkName: "math" */ "./js/math.js").then(({ count }) => {
    console.log(count(2, 1));
  });
};

eslint 配置

// .eslintrc.js
module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
 // 解决动态导入import语法报错问题 --> 实际使用eslint-plugin-import的规则解决的
  plugins: ["import"],
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
 
};

webpack.config.js

chunkFilename 加入chunk字段是为了与主文件区分

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
    chunkFilename: "static/js/[name].chunk.js", // 动态导入输出资源命名方式
    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
  },
  module: {
    rules: [
      // loader的配置
      {
        oneOf: [
 // https://webpack.docschina.org/guides/asset-modules/#resource-assets
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/, //$匹配结尾，在多行检测中，会匹配一行的结尾
            type: "asset", //转base64
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024, // 小于10kb的图片转为base64,用于减少请求数据,但体积会大一点点
              },
            },
            // generator: {assetModuleFilename统一定义
            //   // 生成输出的图片名字[hash:10]表示只取前10位
            //   // ext:扩展名
            //   // query图片参数
            //   filename: "static/images/[hash:10][ext][query]",
            // },
          },
          {
            test: /\.(ttf|woff2?|mp3|mp4|avi)$/, //匹配字体图标库或者视频文件
            type: "asset/resource", //resource对文件原样的输出
            // generator: { assetModuleFilename 统一定义
            //   //输出media名称
            //   filename: "static/media/[hash:10][ext][query]",
            // },
          },
            ]
        }
    ]
},
 plugins: [
        //如果用到了css插件也要改一下
         // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/[name].css",
      chunkFilename: "static/css/[name].chunk.css",
    }),
    ],
  optimization: {
    minimizer: [
// 代码分割配置
    splitChunks: {
      chunks: "all", // 对所有模块都进行分割
      // 其他内容用默认配置即可
    },
    // 提取runtime文件(防止被依赖的主文件随着变化而变化)
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`, // runtime文件命名规则
    },
    ]}
}

命名后的打包样式

比如：是用户点击按钮时才加载这个资源的，如果资源体积很大，那么用户会感觉到明显卡顿效果

如果我们想在浏览器空闲时间，加载后续需要使用的资源。我们就需要用上 Preload 或 Prefetch 技术。可以参考

 Preload 或 Prefetch

到此这篇关于webpack5 import动态导入实现按需加载并给文件统一命名的文章就介绍到这了,更多相关webpack5 import按需加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！