之前在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. 【转】oracle条件子句执行顺序

    Oracle WHERE条件执行顺序:ORACLE采用自下而上的顺序解析WHERE子句 1.据此那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾例如:SELECT … FROM EMP E ...

  2. Mysql的binlog日志与mysqlbinlog命令

    binlog相关 MySQL 的二进制日志 binlog 可以说是 MySQL 最重要的日志,它记录了所有的 DDL 和 DML 语句(除了数据查询语句select.show等),以事件形式记录,还包 ...

  3. 初探ASP.NET Core 3.x (4) - 项目的重要组成

    目录 O 前请提要 I 启动部分 I.1 Program类 I.2 Startup类 I.2.1 这个类干什么呢?? I.2.2 特征?? I.3 appsettings.json I.4 launc ...

  4. .net Core Autofac稍微高级一点的方法

    前情摘要 前段时间写了autofac的注入但是每次都需要去修改startup这应该不是大家想要的. 至少不是我想要的. 网上有朋友说可以创建一个基础类来时间. 好了吹牛时间结束我们开始干点正事. 创建 ...

  5. 玩转Django2.0---Django笔记建站基础九(一)(Auth认证系统)

    第九章 Auth认证系统 Django除了有强大的Admin管理系统之外,还提供了完善的用户管理系统.整个用户管理系统可分为三大部分:用户信息.用户权限和用户组,在数据库中分别对应数据表auth_us ...

  6. 夜深了 关于 异步Action的定义的截图

  7. laravel 操作多数据库总结

    laravel 操作多数据库总结 读写分离 env配置 DB_CONNECTION=mysql DB_HOST=xxxxxx DB_PORT=xxx DB_DATABASE=xx DB_USERNAM ...

  8. 什么是 Trait

    Trait 是从 PHP 5.4 加入的一种细粒度代码复用的语法.以下是官方手册对 Trait 的描述: Trait 是为类似 PHP 的单继承语言而准备的一种代码复用机制.Trait 为了减少单继承 ...

  9. AcWing 786.第k个数

    AcWing 786.第k个数 题目描述 给定一个长度为n的整数数列,以及一个整数k,请用快速选择算法求出数列的第k小的数是多少. 输入格式 第一行包含两个整数 n 和 k. 第二行包含 n 个整数( ...

  10. 为什么Netflix没有运维岗位？

    Netflix 是业界微服务架构的最佳实践者,其基于公有云上的微服务架构设计.持续交付.监控.稳定性保障,都为业界提供了大量可遵从的原则和实践经验. 在运维这个细分领域,Netflix 仍然是最佳实践 ...