webpack en-demanda de carga

Cuando un archivo de página es demasiado grande y no se utiliza necesariamente, queremos usar cuando empieza a cargar este archivo, comúnmente conocida como la carga de la demanda. Esto reduce el tiempo de respuesta de la página, para mejorar la velocidad de acceso.

Uso webpack lleno del archivo que desea alcanzar los requisitos anteriores de dos maneras, una es webpack método require.ensure único, existe un método de importación.

require.ensure (DEP: matriz, CB: función, el nombre ?: cadena)

El primer parámetro es dependiente del módulo, el segundo parámetro es el módulo de devolución de llamada ejecutado después de que se completó la carga, el tercer parámetro corresponde webpack.config.js en output.chunkFilename: '[nombre] .js' en nombre.

archivo index.html

<button id='btn'>
  点击我
</button>

archivo index.js

document.querySelector('#btn').onclick = function () {
  require.ensure([], function () {
    let a = require('./asynca.js')
    console.log('asynca模块加载完毕：'a)
  }, 'asynca')
}

archivo asynca.js

console.log('我是async模块')
export const a = '模块async'

webpack.config.js archivo

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve('./dist'),
    filename: '[name].[chunkHash].js',
    chunkFilename: '[name].[chunkHash].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ]
}

Embalaje resultados son los siguientes:

Vista previa de index.html, ver la solicitud y salida condiciones de los recursos:

Abra el archivo en el paquete dist encontró que sólo un hombre ... js archivo index.html y se carga el archivo y require.ensure devolución de llamada no hay signos de que se realiza:

Haga clic en la solicitud de recursos y la salida de la situación después de que el botón de:

archivo asynca se carga dinámicamente en, y se ejecuta la función de devolución de llamada require.ensure.

resumen

A través de las observaciones anteriores hemos logrado nuestro objetivo de módulos de carga dinámica por require.ensure.

importar()

Este método devuelve una promesa, después de que el archivo haya terminado de cargar el módulo será exportado a la promesa de devolución de llamada de.

index.import.js

document.querySelector('#btn').onclick = function () {
  console.log('我是通过import来实现按需加载的')
  let a = import('./asynca.js')
  a.then(function (res) {
    console.log('加载完成的async模块', res)
  })
}

Nota: en línea con otros documentos y garantizar métodos.

Embalaje resultados son los siguientes:

Vista previa de index.html, ver la solicitud y salida condiciones de los recursos:

Haga clic en la solicitud de recursos y la salida de la situación después de que el botón de:

resumen

El mismo método se puede observar que la demanda de carga de importación y la demanda, pero el nombre de archivo resultante es llamado por números, y no se puede especificar como tercer parámetro a asegurar, y creo que debe haber un método para lograr .

referencia

https://segmentfault.com/q/1010000014699780/a-1020000015102124