腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Young Dreamer

专栏作者

29

文章

43465

阅读量

32

订阅数

Vue Router的懒加载路径

webpack 打包 javascript node.js vue.js

单页应用产出的入口chunk大小随着业务的复杂度线性增加，导致后期加载速度越来越慢。后面就需要对不同路径下的模块进行拆分，打包到相应的chunk下，按需加载，找到chunk的大小、个数和页面加载速度的平衡点。解决办法 .vue模块文件按需加载，其实要做到两件事情：一是标记出这是一个异步组件；二是通知webpack把该组件单独产出为一个chunk。 vue的异步组件官网给出的异步组件写法：异步组件是一个函数，函数的返回值是一个Promise，只是Promise的resolve函数的参数是常规组件的定

2018-07-05

1.2K0

webpack4：连奏中的进化

webpack4在2月底的时候发布，这次webpack4有了一个名字"Legato"，也就是"连奏"的意思，寓意webpack在不断进化，而且是无缝(no-gaps)的进化。webpack的进化点是通过捐赠者和用户投票来决定的，之前在介绍webpack3的时候，曾给出过投票数在前几名的优化点，集中在用户体验、构建性能（速度和产出大小）、通用和适配性（es module、typescript、web assemble）等。webpack4发布了，下面将结合文档和实践，验证一下webpack是否兑现了当初的诺

2018-05-29

1.3K0

webpack3新特性简介

6月20号webpack推出了3.0版本，官方也发布了公告。根据公告介绍，webpack团队将未来版本的改动聚焦在社区提出的功能需求，同时将保持一个快速、稳定的发布节奏。本文主要依据公告内容，简单介绍一下webpack3的新特性，以及在实际项目中的应用。升级到webpack3 升级到webpack3，只需要通过npm安装即可： npm install webpack@3.0.0 --save-dev webpack3几乎与webpack2完美兼容，除了会影响一些插件的使用，官方给出的数据是：98%的用户升

2018-01-31

1.1K0

webpack的Hot Module Replacement运行机制

使用webpack打包，难免会使用Hot Module Replacement功能，该功能能够实现修改、添加或删除前端页面中的模块代码，而且是在页面不刷新的前提下。它究竟是怎么运作的呢？本文主要从调试工具、配置文件、官方文档三个方面进行解析。调试工具首先从chrome的调试工具network中看看，代码改变的时候，页面与后端之间发生了什么？页面初始加载我们看到除了加载页面所依赖的文件外，多了一个连接，这是一个Server-sent Events，相关的介绍可以参考这篇文章，而且每隔一段时间都会向发送

2018-01-31

1.1K0

webpack中tree-shaking技术介绍

之前介绍过webpack3的新特性，里面提到webpack2支持了ES6的import和export，不需要将ES6的模块先转成CommonJS模块，然后再进行打包处理。正基于此，webpack2引入了tree-shaking技术，能够在模块的层面上做到打包后的代码只包含被引用并被执行的模块，而不被引用或不被执行的模块被删除掉，以起到减包的效果。 webpack的tree-shaking案例下面结合实际代码来解释webpack2是如何实现tree-shaking的，示例代码可到github进行下载。示例

2018-01-31

9050

canvas绘图不清晰的解决方案

现象描述　　同样大小的图片（60x60px）用canvas和DOM绘制，结果发现canvas的画面质量要差很多。结果如下图所示。　　上图中，左侧红框中的金币采用DOM绘制，右侧和下方的金币和文字等

2018-01-31

1.5K0

babel入门基础

背景 babel的官网说babel是下一代的js语法编译器，现在自己也在很多项目中使用了babel，可是自己对babel的认识呢，只停留在从google和别人项目中copy的配置代码上，内心感到很不安，最近花了点时间整理了一下，分享给大伙。 babel常用配置通常在前端或node项目中，进行以下配置：入口文件app.babel.js里面配置： // babel require('babel-core/register')({ presets: ['es2015', 'stage-0'] }); re

2018-01-31

8500

webpack务虚扫盲

json html css 缓存 webpack

打包工具的角色所谓打包工具在web开发中主要解决的问题是：（1）文件依赖管理。毕竟现在都是模块化开发，打包工具首先就是要梳理文件之间的依赖关系。（2）资源加载管理。web本质就是html、js和

2018-01-31

1.1K0

没有更多了

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态