Webpack之魔法注释/* webpackChunkName:“lodash“ */的做用

最新推荐文章于 2024-01-10 15:50:01 发布

岁月如歌☆

最新推荐文章于 2024-01-10 15:50:01 发布

阅读量1.8k

点赞数

分类专栏：学习之路

本文链接：https://blog.csdn.net/weixin_50377234/article/details/117215790

版权

学习之路专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Webpack的魔法注释`/*webpackChunkName:“lodash”*/`用于指定异步加载模块的代码块名称。结合SplitChunkPlugin，它能实现按需加载，比如在Vue路由中运用import进行懒加载。这样可以优化首屏加载速度，只在访问特定页面时才下载如lodash等库，提高网页性能。

摘要由CSDN通过智能技术生成

Webpack之魔法注释/* webpackChunkName:“lodash” */的做用## 标题

在这里插入图片描述
作用就是webpack在打包的时候，对异步引入的库代码（lodash）进行代码分割时（需要配置webpack的SplitChunkPlugin插件），为分割后的代码块取得名字

在这里插入图片描述
import异步加载的写法实现页面模块lazy loading懒加载（Vue中的路由异步加载）：
Vue中运用import的懒加载语句以及webpack的魔法注释，在项目进行webpack打包的时候，对不同模块进行代码分割，在首屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化。