传统的两种方式
1.import()
符合ECMAScript提议的import()语法，该提案与普通 import 语句或 require 函数的类似，但返回一个 Promise 对象。这意味着模块时异步加载的
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');}// 或者使用asyncasync function getComponent() {var element = document.createElement('div');const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');element.innerHTML = _.join(['Hello', 'webpack'], ' ');return element;}
2.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} />
3.lazyload-loader
相对于前两种，此种方式写法更为简洁。
使用方式
// webpack 配置文件中 使用lazyload-loader（必须将lazuyload-loader 放置在use的最右侧）module: {rules: [{test: /\.(js|jsx)$/,,use: ['babel-loader','lazyload-loader']},
业务代码中
// 使用lazy! 前缀 代表需要懒加载的Routerimport Shop from 'lazy!./src/view/Shop';// Router 正常使用<Route path="/shop" component={Shop} />
