之前在vue的路由配置文件中看到了/* webpackChunkName:"lodash" */这个注释，

在学习了webpack之后了解其做用，作用就是webpack在打包的时候，对异步引入的库代码（lodash）进行代码分割时（需要配置webpack的SplitChunkPlugin插件），为分割后的代码块取得名字

import异步加载的写法实现页面模块lazy loading懒加载（Vue中的路由异步加载）：

Vue中运用import的懒加载语句以及webpack的魔法注释，在项目进行webpack打包的时候，对不同模块进行代码分割，在首屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化。

如下例子：在点击页面时再加载lodash

Webpack之魔法注释/* webpackChunkName:"lodash" */的做用的更多相关文章

  1. 为Dynamics CRM注释的图片附件做个预览功能

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复163或者20151017可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! Dynamics CRM中注释可 ...

  2. Webpack实现按需打包Lodash的几种方法详解

    参考链接:https://www.jb51.net/article/113235.htm 在vue-cli3中需要将babel-preset-es2015插件更换为@babel/preset-env插 ...

  3. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

  4. 使用 webpack 优化资源

    在前端应用的优化中,对加载资源的大小控制极其的重要,大多数时候我们能做的是在打包编译的过程对资源进行大小控制.拆分与复用.本片文章中主要是基于 webpack 打包,以 React.vue 等生态开发 ...

  5. 10个Vue开发技巧助力成为更好的工程师·二

    优雅更新props 更新 prop 在业务中是很常见的需求,但在子组件中不允许直接修改 prop,因为这种做法不符合单向数据流的原则,在开发模式下还会报出警告.因此大多数人会通过 $emit 触发自定 ...

  6. 提升webpack打包速度

    webpack打包文件体积过大,怎么提升速度? 借助webpack visualizer可视化插件,来看构建的情况.这个问题要具体情况具体分析,看看打包文件有哪些块头比较大,哪些不常改变,最好列一个l ...

  7. webpack摸索笔记

    上一个链接,入门webpack看这篇文章最好:https://segmentfault.com/a/1190000006178770 1.先安装好node 2.建个项目文件 3,.window+r,打 ...

  8. webpack配置之代码优化

    前面的话 前面介绍了webpack的基本配置,本文将详细介绍webpack中关于代码优化的配置 打包公共代码 CommonsChunkPlugin 插件,是一个可选的用于建立一个独立文件(又称作 ch ...

  9. webpack的版本进化史

    一.概述2015,webpack1支持CMD和AMD,同时拥有丰富的plugin和loader,webpack逐渐得到广泛应用. 2016.12,webpack2相对于webpack1最大的改进就是支 ...

随机推荐

  1. 开发者必须要了解的架构技术趋势：Service Mesh

    内容概要 Service Mesh 是干啥的?解决了什么问题? Service Mesh 的特性 Service Mesh 的主流实现有哪些? 1. Service Mesh 是什么? 简单来讲,Se ...

  2. CCPC-wannafly Camp Day2 讲课内容总结（杜瑜皓-数据结构）

    ·栈.单调栈 1.栈的特点与基本操作 2.单调栈 单调栈是一种特殊的栈,其栈内的元素都保持一个单调性(单调递增或者递减). ·单调递增栈,从栈底到栈顶依次递增(单调非递减栈:允许有相等) ·单调递减栈 ...

  3. [bzoj4942] [洛谷P3822] [NOI2017] 整数

    题目链接 https://www.luogu.org/problemnew/show/P3822 想法 这个啊,就是线段树哇 最初的想法是每位一个节点,然后进位.退位找这一位前面第一个0或第一个1,然 ...

  4. 部署Maven项目到tomcat报错：java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderLi

    Maven项目下update maven后Eclipse报错:java.lang.ClassNotFoundException: ContextLoaderL     严重: Error config ...

  5. 正斜杠(" / ")和反斜杠(" \ ")的区别

    反斜杠“\”是电脑出现了之后为了表示程序设计里的特殊含义才发明的专用标点.所以除了程序设计领域外,任何地方都不应该使用反斜杠. 如何区分正反斜杠 英语:"/" 英文是forward ...

  6. 对接口运用扩展方法 Applying Extension Methods to an Interface 精通ASP-NET-MVC-5-弗瑞曼 Listing 4-15

  7. 面向初学者的指南：创建时间序列预测 (使用Python）

    https://blog.csdn.net/orDream/article/details/100013682 上面这一篇是对 https://www.analyticsvidhya.com/blog ...

  8. OpenResty学习指南（二）

    我的个人博客:https://www.luozhiyun.com/ 数据结构table table并没有区分开数组.哈希.集合等概念,而是揉在了一起. local color = {first = & ...

  9. SpringBoot图文教程「概念+案例 思维导图」「基础篇上」

    有天上飞的概念,就要有落地的实现 概念+代码实现是本文的特点,教程将涵盖完整的图文教程,代码案例 每个知识点配套自测面试题,学完技术自我测试 本文初学向,所以希望文中所有的代码案例都能敲一遍 大哥大姐 ...

  10. Intellij idea智能提示设置

    忽略大小写敏感: 打开设置(CTRL+ALT+S)搜索editor,找到"Code Completion"->点击Case sensitive completion后面的选择 ...