webpack5?import動態(tài)導入實現(xiàn)按需加載并給文件統(tǒng)一命名的配置方法

更新時間：2022年11月18日 11:53:30 作者：周家大小姐.

這篇文章主要介紹了webpack5?import動態(tài)導入實現(xiàn)按需加載并給文件統(tǒng)一命名的配置，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

想要實現(xiàn)按需加載，動態(tài)導入模塊。還需要額外配置：

console.log("hello main");
 
document.getElementById("btn").onClick = function () {
   // 動態(tài)導入 --> 實現(xiàn)按需加載  -->then是加載成功要做的處理不處理的話可以不寫
 
  import( "./js/math.js").then(({ count }) => {
    console.log(count(2, 1));
  });
};

效果:

如果沒有配置命名規(guī)則打包后就是這樣的隨機

1.修改文件

main.js

console.log("hello main");
 
document.getElementById("btn").onClick = function () {
   // 動態(tài)導入 --> 實現(xiàn)按需加載  -->then是加載成功要做的處理不處理的話可以不寫
  // eslint會對動態(tài)導入語法報錯，需要修改eslint配置文件
  // webpackChunkName: "math"：這是webpack動態(tài)導入模塊命名的方式
  // "math"將來就會作為[name]的值顯示。
  import(/* webpackChunkName: "math" */ "./js/math.js").then(({ count }) => {
    console.log(count(2, 1));
  });
};

eslint 配置

// .eslintrc.js
module.exports = {
  // 繼承 Eslint 規(guī)則
  extends: ["eslint:recommended"],
  env: {
    node: true, // 啟用node中全局變量
    browser: true, // 啟用瀏覽器中全局變量
  },
 // 解決動態(tài)導入import語法報錯問題 --> 實際使用eslint-plugin-import的規(guī)則解決的
  plugins: ["import"],
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
 
};

webpack.config.js

chunkFilename 加入chunk字段是為了與主文件區(qū)分

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "static/js/[name].js", // 入口文件打包輸出資源命名方式
    chunkFilename: "static/js/[name].chunk.js", // 動態(tài)導入輸出資源命名方式
    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)$/, //$匹配結(jié)尾，在多行檢測中，會匹配一行的結(jié)尾
            type: "asset", //轉(zhuǎn)base64
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024, // 小于10kb的圖片轉(zhuǎn)為base64,用于減少請求數(shù)據(jù),但體積會大一點點
              },
            },
            // generator: {assetModuleFilename統(tǒng)一定義
            //   // 生成輸出的圖片名字[hash:10]表示只取前10位
            //   // ext:擴展名
            //   // query圖片參數(shù)
            //   filename: "static/images/[hash:10][ext][query]",
            // },
          },
          {
            test: /\.(ttf|woff2?|mp3|mp4|avi)$/, //匹配字體圖標庫或者視頻文件
            type: "asset/resource", //resource對文件原樣的輸出
            // generator: { assetModuleFilename 統(tǒng)一定義
            //   //輸出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", // 對所有模塊都進行分割
      // 其他內(nèi)容用默認配置即可
    },
    // 提取runtime文件(防止被依賴的主文件隨著變化而變化)
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`, // runtime文件命名規(guī)則
    },
    ]}
}

命名后的打包樣式

比如：是用戶點擊按鈕時才加載這個資源的，如果資源體積很大，那么用戶會感覺到明顯卡頓效果

如果我們想在瀏覽器空閑時間，加載后續(xù)需要使用的資源。我們就需要用上 Preload 或 Prefetch 技術(shù)。可以參考

Preload 或 Prefetch

到此這篇關(guān)于webpack5 import動態(tài)導入實現(xiàn)按需加載并給文件統(tǒng)一命名的文章就介紹到這了,更多相關(guān)webpack5 import按需加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: