webpack import() 动态加载模块踩坑

GeekGhc 发布于2019-08-22 18:45 / 991人阅读

摘要：根据规范实现了用于动态加载的方法。在浏览器运行到这一行代码时，就会自动请求这个资源，实现异步加载。为减少主包大小，我们希望动态加载这些页面。所以的正确姿势，应该是尽可能静态化表达包所处的路径，最小化变量控制的区域。

import

webpack根据ES2015 loader 规范实现了用于动态加载的import()方法。

这个功能可以实现按需加载我们的代码，并且使用了promise式的回调，获取加载的包。

在代码中所有被import()的模块，都将打成一个多带带的包，放在chunk存储的目录下。在浏览器运行到这一行代码时，就会自动请求这个资源，实现异步加载。

这里是一个简单的demo。

import("lodash").then(_ => {
    // Do something with lodash (a.k.a "_")...
  })

可以看到，import()的语法十分简单。该函数只接受一个参数，就是引用包的地址，这个地址与es6的import以及CommonJS的require语法用到的地址完全一致。可以实现无缝切换【写个正则替换美滋滋】。

并且使用了Promise的封装，开发起来感觉十分自在。【包装一个async函数就更爽了】

然而，以上只是表象。

只是表象。

我在开发的时候就遇到了问题。场景是这样的：一个对象，存储的是各级的路由信息，及其对应的页面组件。为减少主包大小，我们希望动态加载这些页面。

同时使用了react-loadable来简化组件的懒加载封装。代码如下所示。

function lazyLoad(path) {
  return Loadable({
    loader: () => import(path),
    loading: Spin,
  });
}

然后我就开始开心的在代码中写上lazyLoad("./pages/xxx")。果不其然，挂了。浏览器表示，没有鱼丸没有粗面，也不知道这个傻逼模块在哪里。

于是我查看了官方文档，发现有一个黄条提示。

emmm，看来问题出在这里了。

这个现象其实是与webpack import()的实现高度相关的。由于webpack需要将所有import()的模块都进行多带带打包，所以在工程打包阶段，webpack会进行依赖收集。

此时，webpack会找到所有import()的调用，将传入的参数处理成一个正则，如：

import("./app"+path+"/util") => /^./app.*/util$/

也就是说，import参数中的所有变量，都会被替换为【.*】，而webpack就根据这个正则，查找所有符合条件的包，将其作为package进行打包。

因此，如果我们直接传入一个变量，webpack就会把 (整个电脑的包都打包进来[不闹]) 认为你在逗他，并且抛出一个WARNING: Critical dependency: the request of a dependency is an expression。

所以import的正确姿势，应该是尽可能静态化表达包所处的路径，最小化变量控制的区域。

如我们要引用一堆页面组件，可以使用import("./pages/"+ComponentName)，这样就可以实现引用的封装，同时也避免打包多余的内容。

另外一个影响功能封装的点，是import()中的相对路径，是import语句所在文件的相对路径，所以进一步封装import时会出现一些麻烦。

因为import语句中的路径会在编译后被处理成webpack命令执行目录的相对路径.

友情链接：

https://webpack.js.org/api/mo...

云服务器 GPU云服务器 webpack按需加载未能加载模块内核模块加载 python加载模块

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96166.html

百度地图 osm地图 leaflet echarts webapck的组合使用时的踩坑记录

摘要：百度地图创建标签进行加载使用百度地图需要百度地图添加扩展，用于让百度地图支持地图可能会遇见两个问题地图图片错位忘记加载中使用的一个主要问题是默认图标的加载问题，详见另外也可以考虑使用动态创建标签的方法，类似百度地图加载百度地图因为本身支持的 webpack+百度地图创建 script标签进行加载 export function MP(ak){ return new Prom...

G9YH 2019-08-23 15:31 评论0 收藏0
Vue + TypeScript + Element 项目实践(简洁时尚博客网站)及踩坑记

摘要：前言本文讲解如何在项目中使用来搭建并开发项目，并在此过程中踩过的坑。具有类型系统，且是的超集，在年势头迅猛，可谓遍地开花。年将会更加普及，能够熟练掌握，并使用开发过项目，将更加成为前端开发者的优势。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言本文讲解如何在 Vue 项目中使用 TypeScript...

luckyyulin 2019-08-26 13:39 评论0 收藏0
React 历史项目维护与优化实践

摘要：本文介绍了作者接手维护一个中型历史项目时的一系列改进实践，包括模块结构拆分业务逻辑梳理打包优化等。代码中如菜单名称结构表单字段名等的各种硬编码配置分散在各处。最后，在提升面向开发者的打包体验方面，本次优化中主要实现的是与的解耦。本文介绍了作者接手维护一个中型 React 历史项目时的一系列改进实践，包括模块结构拆分、业务逻辑梳理、Webpack 打包优化等。背景这是一个 PC 的...

toddmark 2019-08-20 16:50 评论0 收藏0
webpack入门及踩坑应对指南

摘要：的使用为什么使用前端需要工程化工程化的概念小作坊流水线流水线的特点自动化，模块化性能优化自动化就是命令行操作，一行命令实现多个功能，例如自动监听变化，自动翻译源代码到打包代码库里面文件复杂多样文件多变化快将各种文件集 webpack的使用为什么使用webpack 1.前端需要工程化工程化的概念：小作坊 -> 流水线流水线的特点：自动化，模块化、性能优化自动化就是命令行操作，一行...

ky0ncheng 2019-08-22 16:20 评论0 收藏0
webpack启动代码源码解读

摘要：它是如何用原生实现模块间的依赖管理的呢对于按需加载的模块，它是通过什么方式动态获取的打包完成后那一堆开头的代码是用来干什么的本文将围绕以上个问题，对照着源码给出解答。欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言虽然每天都在用webpack，但一直觉得隔着一层神秘的面纱，对它的工...

zengdongbao 2019-08-23 12:08 评论0 收藏0