之前在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. win10关闭系统更新 (转载)

    一.关闭Windows10系统的自动更新服务 1:使用快捷键Win+R,打开运行 2:输入命令:services.msc,打开系统服务界面 找到Windows Update双击 将启动类型改为[禁用] ...

  2. Centos7 搭建Grafana+Jmeter+Influxdb 性能实时监控平台

    未完,待更新 背景 日常工作中,经常会用到Jmeter去压测,毕竟LR还要钱(@￥&*...),而最常用的接口压力测试,我们都是通过聚合报告去查看压测结果的,然鹅聚合报告的真的是丑到家了,作为 ...

  3. Java入门 - 高级教程 - 03.泛型

    原文地址:http://www.work100.net/training/java-generic.html 更多教程:光束云 - 免费课程 泛型 序号 文内章节 视频 1 概述 2 泛型方法 3 泛 ...

  4. C# winform 弹框提示内存不足

    看了下面一片博文解决的 Winform 内存不足Winform,我给PictureBox 赋值 picBox_One.BackgroundImage = Image.FromFile("图片 ...

  5. CSS-18-媒体查询

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Python 类中方法的内部变量，命名加'self.'变成 self.xxx 和不加直接 xxx 的区别

    先看两个类的方法: >>> class nc(): def __init__(self): self.name ='tester' #name变量加self >>> ...

  7. python文件的打开与关闭

    #文件的打开 #open(文件名,访问模式) f=open('test.txt','w') #文件的关闭 f.close() 访问模式 说明 r 以只读方式打开文件.文件的指针将会放在文件的开头.这是 ...

  8. Codeforces_708_A

    http://codeforces.com/problemset/problem/708/A 贪心,先把前面连续的一串'a'排除,再向后知道找到第一个'a',注意特殊情况. #include<i ...

  9. 《Python学习手册 第五版》 -第4章 介绍Python对象类型

    本章的内容主要是介绍了Python的核心对象类型,后续的5.6.7.8.9章针对这些核心类型分别展开详细的说明 本章我认为重要的有几点 1.作者有谈到Python的知识结构,这个我感觉是一个大框架,可 ...

  10. jsp关于request.setAttribue还有response.addCookie()的两个问题

    刚才使用request.getAttribute();时候无法获取到值,一直为null,经过分析,得到下面的 index1.jsp <%-- Created by IntelliJ IDEA. ...