Webpack实战(九):实现资源按需加载-资源异步加载

第八篇[《教你搞懂webpack如果实现代码分片(code splitting)》] (https://blog.csdn.net/lfcss/article/details/104099412) 主要分享了webpack实现代码分片 的几种方式:合理地规划入口,使用Commons-ChunkPlugin或SplitChunks配置。这几种方法实现了资源按需加载。今天我分享另外一种实现方法–资源异步加载。

资源异步加载主要解决的问题是,当模块数量过多、资源体积过大时,可以把一些暂时使用不到的模块延迟加载。这样使页面初次渲染的时候用户下载的资源尽可能小,后续的模块等到恰当的时机再去触发加载。

webpack资源异步加载的方法

在webpack中主要提供两种方法:import函数和require.ensure。在webpack4之前,webpack 在编译时,会静态地解析代码中的 require.ensure(),同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。今天主要webpack4以后的import加载。

Webpack中的import

与正常ES6中的import语法不同,通过import函数加载的模块及其依赖会被异步地进行加载,并返回一个Promise对象。
一般正常的模块加载代码如下:

// index.js
import { add } from  './index2.js';
console.log(add(2,3));

// index2.js
export function add(a, b) {
  return a + b
}

打包的效果及运行效果:
在这里插入图片描述
在这里插入图片描述
假设index2.js的资源体积很大,并且我们在页面初次渲染的时候并不需要使用它,就可以对它进行异步加载。
index.js和index2.js代码如下:

// index.js
import('./index2.js').then(({add}) => {
  console.log(add(2,3))
})

// index2.js
export function add(a, b) {
  return a + b
}

webpack.config.js配置代码如下:

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js'
  },
  output: {
    //path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/dist/'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            }
          }
        }]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [
              [
                'env', {
                  modules: false
                }
              ]
            ]
          }
        }
      }
    ],
  }
}

打包的效果及运行效果:
在这里插入图片描述
在这里插入图片描述
首屏加载的JS资源地址是通过页面中的script标签来指定的,而间接资源(通过首屏JS再进一步加载的JS)的位置则要通过output.publicPath来指定。上面我们的import函数相当于使index2.js成为了一个间接资源,我们需要配置publicPath来告诉Webpack去哪里获取它。

由上图可以看出,Chrome的nextwork面板看到一个0.js的请求,它就是index2及其依赖产生的资源。观察面板中的Initinator字段,可以看出它是有index.js产生的请求。查看index.js可以看出,是由这段代码动态的在head头部添加script标签引入的方式,引入0.js,查看源代码并不能找到这段引入的代码,所以是js动态添加进去的。
在这里插入图片描述

在element 面板能查到script标签动态插入的0.js代码。
在这里插入图片描述

注意:import函数还有一个比较重要的特性。ES6 Module中要求import必须出现在代码的顶层作用域,而Webpack的import函数则可以在任何我们希望的时候调用

异步chunk的配置

由上面的方法我们已经实现了异步资源,但是此产生的资源名称都是数字如0.js,比较随机,不具有可读可维护性。此时就需要我们去配置Webpack的一些参数来为其添加有意义的名字,便于我们维护它们。

我们在Webpack的配置中添加了output.chunkFilename,用来指定异步chunk的文件名。其命名规则与output.filename基本一致,不过由于异步chunk默认没有名字,其默认值是[id].js。
配置代码为:

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js'
  },
  output: {
    //path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/dist/',
    chunkFilename:'[name].js'
  },
  mode: 'development',
  // optimization: {
  //   splitChunks: {
  //     chunks: 'all'
  //   }
  // },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            }
          }
        }]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [
              [
                'env', {
                  modules: false
                }
              ]
            ]
          }
        }
      }
    ],
  }
}

index.js修改为:

import(/* webpackChunkName:'index2'*/'./index2.js').then(({add}) => {
  console.log(add(2,3))
})

在这里插入图片描述
在index.js中,我们通过特有的注释来让Webpack获取到异步chunk的名字,并配置output.chunkFilename为[name].js,由上图可以看出,0变成了index2.js

chrome network上的element面板效果如下图:
在这里插入图片描述

总结

资源异步加载方法import()和require.ensure(),也可以有效地缩小资源体积,同时更好地利用缓存,给用户更友好的体验。如果想了解更多,请扫描二维码:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值