Webpack js 懒加载
现在的前端单页应用,都是通过路由导向到具体的页面。随着应用越来越大,页面也越来越多,首屏加载越来越慢,因为需要下载文件越来越大。这时候就需要通过懒加载分离路由页面,按需加载。那么webpack是如果对页面进行懒加载处理的呢? webpack支持两种动态加载的配置: 1. ECMAScript 的 import() ( 注意是带()的,带() 表示异步,不带() 表示立即加载 ) 2. webpack 自带的 require.ensure 下面我们使用import来模拟对文件进行懒加载 // index.js // 需要安装 @babel/plugin-syntax-dynamic-import 插件 import('./ejs').then(res => { console.log( 'ejs: ' , res) }) import( './cjs').then(res => { console.log( 'cjs: ' , res) }) // ejs.js const a = 12 const b = { a: 1 , b: 2 } function fn1 (a) { console.log( 'fn1 in ejs: ' , a) } export default fn1 export { a, b } // cjs.js const a = 1 const b = 2