webpack打包懒加载

lazyload

https://webpack.js.org/guides/lazy-loading/

懒加载 -- 按需加载。

Lazy, or "on demand", loading is a great way to optimize your site or application. This practice essentially involves splitting your code at logical breakpoints, and then loading it once the user has done something that requires, or will require, a new block of code. This speeds up the initial load of the application and lightens its overall weight as some blocks may never even be loaded.

 

webpack solution

https://webpack.js.org/migrate/3/#code-splitting-with-es2015

 

Code Splitting with ES2015

In webpack 1, you could use require.ensure() as a method to lazily-load chunks for your application:

require.ensure([], function(require) { var foo = require('./module'); });

The ES2015 Loader spec defines import() as method to load ES2015 Modules dynamically on runtime. webpack treats import() as a split-point and puts the requested module in a separate chunk. import() takes the module name as argument and returns a Promise.

function onClick() { import('./module').then(module => { return module.default; }).catch(err => { console.log('Chunk loading failed'); }); }

Good news: Failure to load a chunk can now be handled because they are Promise

 

require.ensure

https://webpack.js.org/api/module-methods/#requireensure

require.ensure() is specific to webpack and superseded by import().

require.ensure(
  dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String )

Split out the given dependencies to a separate bundle that that will be loaded asynchronously. When using CommonJS module syntax, this is the only way to dynamically load dependencies. Meaning, this code can be run within execution, only loading the dependencies if certain conditions are met.

This feature relies on Promise internally. If you use require.ensure with older browsers, remember to shim Promise using a polyfill such as es6-promise or promise-polyfill.

var a = require('normal-dep'); if ( module.hot ) { require.ensure(['b'], function(require) { var c = require('c'); // Do something special... }); }

The following parameters are supported in the order specified above:

  • dependencies: An array of strings declaring all modules required for the code in the callback to execute.
  • callback: A function that webpack will execute once the dependencies are loaded. An implementation of the require function is sent as a parameter to this function. The function body can use this to further require() modules it needs for execution.
  • errorCallback: A function that is executed when webpack fails to load the dependencies.
  • chunkName: A name given to the chunk created by this particular require.ensure(). By passing the same chunkName to various require.ensure() calls, we can combine their code into a single chunk, resulting in only one bundle that the browser must load.

Although the implementation of require is passed as an argument to the callback function, using an arbitrary name e.g. require.ensure([], function(request) { request('someModule'); }) isn't handled by webpack's static parser. Use require instead, e.g. require.ensure([], function(require) { require('someModule'); }).

 

import()

import('path/to/module') -> Promise

Dynamically load modules. Calls to import() are treated as split points, meaning the requested module and it's children are split out into a separate chunk.

The ES2015 Loader spec defines import() as method to load ES2015 modules dynamically on runtime.

if ( module.hot ) { import('lodash').then(_ => { // Do something with lodash (a.k.a '_')... }); }

This feature relies on Promise internally. If you use import() with older browsers, remember to shim Promise using a polyfill

 

require (amd-version)

https://webpack.js.org/api/module-methods/#require-amd-version

require(dependencies: String[], [callback: function(...)])

Similar to require.ensure, this will split the given dependencies into a separate bundle that will be loaded asynchronously. The callback will be called with the exports of each dependency in the dependencies array.

This feature relies on Promise internally. If you use AMD with older browsers (e.g. Internet Explorer 11), remember to shim Promise using a polyfill such as es6-promise or promise-polyfill.

require(['b'], function(b) { var c = require('c'); });

There is no option to provide a chunk name.

 

external NPM module -- bundle-loader

https://www.npmjs.com/package/bundle-loader

https://github.com/ruanyf/webpack-demos#demo08-html-webpack-plugin-and-open-browser-webpack-plugin-source

Another way of code splitting is using bundle-loader.

// main.js

// Now a.js is requested, it will be bundled into another file
var load = require('bundle-loader!./a.js'); // To wait until a.js is available (and get the exports) // you need to async wait for it. load(function(file) { document.open(); document.write('<h1>' + file + '</h1>'); document.close(); });

require('bundle-loader!./a.js') tells Webpack to load a.js from another chunk.

Now Webpack will build main.js into bundle.js, and a.js into 0.bundle.js.

 

 

others lazy load

https://webpack.js.org/guides/lazy-loading/

Frameworks

Many frameworks and libraries have their own recommendations on how this should be accomplished within their methodologies. Here are a few examples:

 

reference:

https://github.com/amdjs/amdjs-api

https://github.com/yongningfu/webpa_ensure

https://github.com/yongningfu/webpack_package

 

转载于:https://www.cnblogs.com/lightsong/p/10534644.html

### 回答1: Webpack懒加载是一种优化前端性能的技术,可以减少初始加载文件的大小,从而提高页面加载速度。通常,当页面加载时,所有的JS代码都会被一次性加载并执行。但是,如果我们将某些模块延迟加载,只有在需要时才加载,那么就可以减少初始加载的文件大小。 Webpack提供了一个import()方法,用于动态地加载模块,它会返回一个Promise对象,可以在resolve时获取到模块的导出对象。使用这个方法,我们可以将模块的加载延迟到需要使用的时候再加载,这就是Webpack懒加载的原理。 以下是一个使用Webpack懒加载的示例: ``` import('./module').then(module => { // 使用模块 }); ``` 在上面的示例中,当代码执行到import()时,会异步地加载'module'模块,加载完成后,会执行then()中的回调函数,我们可以在回调函数中使用模块。 注意:使用Webpack懒加载时,需要确保代码可以被正确地拆分成多个文件,否则可能会导致页面加载错误。 ### 回答2: webpack懒加载是一种通过代码分割实现按需加载模块的技术。当使用webpack构建项目时,所有的模块将被打包到一个文件中,然后在浏览器中加载。这意味着无论使用者需要哪些模块,都会一次性加载,这可能会导致初始加载时间过长。 懒加载通过将应用程序拆分为不同的模块,使得每个页面仅加载当前页面所需的模块,而不是加载整个应用程序。当用户访问某个页面时,只有该页面所需要的模块会被加载,其他模块则会等到需要时再进行加载。这样就能减少初始加载时间,提高页面的响应速度。 实现懒加载的方式有多种。一种常见的方式是使用import()函数动态导入模块。import()函数会返回一个Promise对象,当该模块被加载后,Promise会被resolve。可以通过调用then()方法来执行加载完成后的回调函数。 另一种方式是使用React中的Suspense组件来包裹异步加载的组件。Suspense组件可以渲染一个在组件加载完成之前显示的loading界面,等到异步组件加载完成后再进行渲染。 懒加载不仅可以减少初始加载时间,还可以按需加载不同的模块,提高应用的性能和效率。然而,懒加载也有一些注意事项。需要确保按需加载的模块之间的依赖关系正确,并且避免产生额外的网络请求。要注意合理使用懒加载,避免过度拆分导致加载过多的小模块,从而影响性能。 总结来说,webpack懒加载是一种通过代码分割实现按需加载模块的技术,可以提高应用的加载速度和性能。通过合理使用懒加载的方式,可以有效减少初始加载时间,提高用户体验。 ### 回答3: Webpack懒加载是指将某个模块作为一个单独的文件进行加载,而不是和其他模块一起打包到同一个初始模块中。这样可以在需要时才加载该模块,而不是在初始加载时就加载所有模块。 懒加载的主要优势在于减少初始加载时的文件大小和加载时间。当网页打开时,只需要加载初始模块,而其他模块则在实际需要时再进行加载。这样可以提升网页的加载速度和用户体验,特别是对于大型应用程序。 在Webpack中实现懒加载可以通过使用import函数的动态导入语法来实现。例如,在需要懒加载的地方使用类似于import('module')的语法来导入模块。Webpack会将该模块打包为一个单独的文件,并在需要时进行异步加载。 需要注意的是,懒加载需要配合Webpack的代码分离功能来使用。通过配置Webpack的optimization.splitChunks参数,可以将重复引用的模块提取出来,生成共享的模块文件。这样可以避免在懒加载时重复加载已经存在的模块。 除了使用动态导入语法外,Webpack还提供了其他的技术来实现懒加载,如按需加载的require.ensure语法和React.lazy()方法。这些方法都可以实现类似的懒加载效果。 总之,Webpack懒加载是一种优化网页加载性能的重要技术。它通过将复杂的应用程序划分为多个模块文件,在需要时再进行加载,从而减少初始加载时间和文件大小,提升用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值