传统的两种方式
import()
符合 ECMAScript 提议的 import() 语法, 该提案与普通 import 语句或 require 函数的类似, 但返回一个 Promise 对象. 这意味着模块时异步加载的
webpack v2+ 使用
使用方式
- function component() {
- return import( /* webpackChunkName: "lodash" */ 'lodash').then(_ => {
- var element = document.createElement('div');
- element.innerhtml = _.join(['Hello', 'webpack'], ' ');
- return element;
- }).catch(error => 'An error occurred while loading the component');
- }
- // 或者使用 async
- async function getComponent() {
- var element = document.createElement('div');
- const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
- element.innerHTML = _.join(['Hello', 'webpack'], ' ');
- return element;
- }
- require.ensure
webpack 指定的使用方式
webpack v1 v2 指定使用方式
使用方式
- require.ensure([], function(require){
- var list = require('./list');
- list.show();
- ,'list');
- <!-- Router -->
- const Foo = require.ensure([], () => {
- require("Foo");
- }, err => {
- console.error("We failed to load chunk:" + err);
- }, "chunk-name");
- //react-router2 or 3
- <Route path="/foo" getComponent={Foo} />
- // 欢迎加入全栈开发交流群一起学习交流: 864305860
- azyload-loader
相对于前两种, 此种方式写法更为简洁.
使用方式
- // webpack 配置文件中 使用 lazyload-loader(必须将 lazuyload-loader 放置在 use 的最右侧)
- module: {
- rules: [
- {
- test: /.(JS|jsx)$/,,
- use: [
- 'babel-loader',
- 'lazyload-loader'
- ]
- },
业务代码中
- // 使用 lazy! 前缀 代表需要懒加载的 Router
- import Shop from 'lazy!./src/view/Shop';
- // Router 正常使用
- <Route path="/shop" component={Shop} />
给大家推荐一个免费的学习群, 里面概括移动应用网站开发, CSS,HTML,webpack,vue node angular 以及面试资源等.
来源: http://www.qdfuns.com/article/51117/2b9b48b3279daed4d6035783eb0e70d0.html