随着前端应用体积的扩大，资源加载的优化是我们必须要面对的问题，动态代码加载就是其中的一个方案，webpack 提供了符合 ECMAScript 提案 (https://github.com/tc39/proposal-dynamic-import) 的 import()语法 (https://www.webpackjs.com/api/module-methods#import-) ，让我们来实现动态地加载模块（注：require.ensure 与 import() 均为 webpack 提供的代码动态加载方案，在 webpack 2.x 中，require.ensure 已被 import 取代）。
Vue作为单页面应用遇到最棘手的问题是首屏加载时间的问题，单页面应用会把页面脚本打包成一个文件，这个文件包含着所有业务和非业务的代码，而脚本文件过大也是造成首页渲染速度缓慢的原因。因此作为首屏性能优化的课题，最常用的处理方法是对文件的拆分和代码的分离。按需加载的概念也是在这个前提下引入的。我们往往会把一些非首屏的组件设计成异步组件，部分不影响初次视觉体验的组件也可以设计为异步组件。这个思想就是按需加载。通俗点理解，按需加载的思想让应用在需要使用某个组件时才去请求加载组件代码。我们借助webpack打包后的结果会更加直观。
框架介绍，使用webpac构建的react单页面应用，集成antd。使用webpack-dev-server启动本地服务，加入热更新便于开发调试。使用bundle-loader进行代码切割懒加载 手动搭建，不使用cli，大量注释适合初学者对webpack的理解学习，对react项目的深入了解
前端工程化彻底盛行的今天，我们已经习惯使用打包工具来帮助我们打包代码到最终能在浏览器运行的js或者css代码，这样我们就可以在编写代码时放心地使用所有的高级语法，其中最让前端coder感到爽快的就是 import export，我们不再需要像以前一样在html里面放很多很多script。或者使用amd。cmd，requirejs工具来写模块引用的代码，这些方便，也让我们很容易忽略一个问题，就是打包的产物的大小，当一个项目足够大时，我们的js甚至可以达到几MB到几十MB，所以，今天就来总结下关于减小构建产物体积，来达到减少首屏加载时间的内容
前几天我们稍微尝试了一下Webpack提供的新能力Module Federation，它为我们代码共享跟团队协作提供了新的可能性。之前若是我们项目A跟项目B有一些共同的逻辑，那我们可能会选择把它抽成一个npm包，然后在两个项目间引入。但是这有个缺点是只要npm包更新，我们的项目就需要重新打包来引入公共逻辑的更新，哪怕项目里一行代码没改。
本文首发于政采云前端团队博客：动态表单之表单组件的插件式加载方案 https://www.zoo.team/article/dynamic-form-loading-method
作为一名前端工程师，总是用一些脚手架来快速搭建新项目的基本结构，因此今天尝试着一步步搭建一个 React 的项目环境，看看需要处理哪些问题，查漏补缺！
学习Vue的时候，各类教程都会告诉我们：Vue 的特点是SPA——Single Page Application（单页应用程序）。它有着诸如：“只有第一次会加载页面, 以后的每次页面切换，只需要进行组件替换；减少了请求体积，加快页面响应速度，降低了对服务器的压力” 等等优点。
本次写作来源于一次面试，前端架构师岗位，最后面试官临时给我掏出了一道比较少见的面试题 ，终究斩获offer ，虽然这道题并不难，但是考察的东西挺有趣，加上近期有看到前端防御性编程、优雅处理前端错误的文章，于是想起来把这道题写了下来。
在大型应用里，有些组件可能一开始并不显示，只有在特定条件下才会渲染，那么这种情况下该组件的资源其实不需要一开始就加载，完全可以在需要的时候再去请求，这也可以减少页面首次加载的资源体积，要在Vue中使用异步组件也很简单：
工程化，可以理解为使用一些方式，去改良然后提高行业中现有的步骤、设计、应用方式。前端工程化，就是指对前端进行一些流程的标准化，让开发变得更有效率，且更好地做产品交付。
原创不易，未经作者允许禁止转载！！ Webpack-Dev-Server 为什么要搭建本地服务器 目前开发的代码，为了运行需要有两个操作 npm run build编译 通过live-server或者直接通过浏览器打开html文件，查看效果 为了完成自动编译，webpack提供了几种可选的方式 Webpack watch mode Webpack-dev-server Webpack-dev-middleware Webpack Watch Mode webpack提供了watch模式 在该模式下，web
随着前端应用越来越复杂，越来越庞大。前有巨石应用像滚雪球一般不断的叠高，后有中后台应用随着历史长河不断地积累负债，或者急需得到改善。微前端的工程方案在前端er心中像一道曙光不断的被提起，被实践，多年至今终于有了比较好的指引。它在解决大型应用之间复杂的依赖关系，或是解决我们技术栈的迁移历史负担，都在一定程度上扮演了极其关键的桥梁。
最近朋友内推面试了几家公司（货拉拉、虾皮、有赞、乐信、Qtrade苹果树、富途、涂鸦、OPPO、微保、微众、元戎启行），也收获了满意的offer。整理了下面试遇到的问题，作为记录。
本文来自作者@几米阳光 投稿 原文链接：https://juejin.cn/post/6991724298197008421
yield实际就是暂缓执行的标示，每执行一次next()，相当于指针移动到下一个yield位置
为了优化首屏加载渲染速度，减小首屏包体积，项目中很多代码是通过懒加载动态导入（dynamic import）的。
wepack4 出来已经有半年了，目前最新的 release 版本为 4.19.0。由于之前项目打包一直存在性能问题，所以我一直很关注 webpack 和其社区的发展。目前来说 webpack4 已经趋于稳定，很多关键的插件也都更新了对 webpack4 的支持；更为重要的是，webpack4 的官方文档（中英文）已经很完善了，因此现在不学习 webpack4，更待何时。根据 webpack 作者 Tobias Koppers 的说法，他们已经着手开始开发 webpack5 了。
前提： 首先，这个教程主要针对vue小白，并且不知道安装node.js环境的。言归正传，下面开始教程：在维护项目之前，需要把所有的环境搭建好，这里我就不多说了，看这篇就够了：十分钟上手-搭建vue开发环境（新手教程）https://www.jianshu.com/p/0c6678671635
因为一些 npm 的包安装需要编译的环境,mac 和 linux 都还好,大多都齐全 window 用户依赖 visual studio 的一些库和python 2+, windows的小伙伴都装上: windows-build-tools python 2.x
置身世外只为暗中观察！！！Hello大家好，我是魔王哪吒！重学巩固你的Vuejs知识体系，如果有哪些知识点遗漏，还望在评论中说明，让我可以及时更新本篇内容知识体系。欢迎点赞收藏！
1.能够说出什么是路由 2.能够说出前端路由的实现原理 3.能够使用Vue-Router实现前端路由 4.能够实现嵌套路由，动态路由 5.能够实现命名路由以及编程式导航 6.理解并实现后台管理案例
如今使用 CI/CD 工具是网页应用程序开发的一个必要条件。作为关键开发路径的一部分，加快构建系统的速度对于提高开发人员的生产效率是至关重要的。
本文首发于前端面试总结@知乎专栏，各位可以通过点击文章下方的阅读原来来访问原文地址
小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.
如果你对webpack不是很了解，请你关注我之前的文章，都是百星以上star的高质量文
实现Webpack的打包最基本的就是配置好入口、出口，npm install webpack后在根目录创建webpack.config.js,代码如下：
由于没有提前做好复习，所以有点匆忙，腾讯一面问的不难，从vue，react，webpack等等，倒是没准备好，导致回答的满头大汗~~
浏览器正在逐步的支持原生JavaScript模块。Safari和Chrome的最新版本已经支持它们了，Firefox和Edge也将很快推出。
随着前端技术的火热发展，工程化，模块化和组件化的思想已逐步成为主流，与之相应的，就需要有一整套工具流可以支撑起它。
背景 在使用Vue的路途中，你一定知道如何去注册并调用一个组件 通常我们会通过三个步骤来实现调用组件的一整个流程
这可能是80%Vue友最常见的一个使用子组件的模式，没错，我也经常这么干...如果你用腻了这种方式，想换个新奇的，接着往下走，我们再学习两个不常用的但又很高效的使用方式，提升开发逼格。 场景预设1 想象一下一个会员中心组件，有一部分区域用来展示会员与会员差异的相关展示模块，但是这两个只会展示其中一个，会员与非会员。假设我们现在有MemberInfo以及UserInfo两个组件,我们想根据用户身份进行对应模块显示 实现方案1 这可能是大部分前端玩家会想到的实现方式，包括我自己也常常会如此(捂脸)
上篇文章主要讲了图标组件Icon的实现，主要包括了两种常用的图标。今天就讲一下如何在Icon中加载本地的svg图标。
文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!
随着vue3的到来，vite开始被各大vue3组件库使用，公司开始一个新项目，准备尝试用vite试一波。
剔除首次影响加载的效率问题进行剔除修改，本次采用的是 ==webpack-bundle-analyzer（可视化视图查看器）==
目前主流框架react、vue、argular等（还有很多），国内大多数在Vue/React中，argular也有，但似乎用的不多。Vue3.x针对性能，渲染机制等也是一个不错的选择，不过抉择根据你的实际情况来定，我此次选择的是react，原因有很多，就不一一赘述了。
很久之前就遇到过这个问题，一直在造轮子，难免会遇到一些库需要放图片作为背景图，上次是作为内联base64解决这个问题，但是也没有追寻为什么。这次又遇到了这个问题，应该仔仔细细弄个清楚，并花时间整理记录一下。
作为一个有代码洁癖的程序员，我是不允许这种重复性代码存在滴，于是乎就尝试有没有什么简单的方法。
个人基于对 Vue.js 的学习制作了一个 Todo 单页应用 Lightodo，功能包括：添加待办事项卡片，对卡片或待办事项进行排序或删除操作，设置待办事项定时提醒，登录注册等，仅供参考，请勿模仿~ 提醒：Vuejs 如今正处在快速发展中，很多资源随时都有可能过时（outdated），记得查看最新文档，使用最新资源。 Vue的官方说明 数据驱动的组件，为现代化的 Web 界面而生。 Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要(依赖)的每个模块(modules)，然后将所有这些模块打包成一个或多个 assets。
此项目为公司的公众号管理系统，承载了公司每个部门的业务，需求多，开发周期长，技术可圈可点之处较多，特此记录与大家分享!
这一次滴滴面试官问了很多问题，主要是围绕着简历去展开。有问了node进程，还有express等等。手撕的代码比较多，对，然后还变到了vue2和vue3，目前Vue3的话现在是全面使用。
如今，越来越多的JavaScript代码被使用在页面上，我们添加很多的内容在浏览器里。如何去很好的组织这些代码，成为了一个必须要解决的难题。
最近TWaver 3D机房项目打算使用Ant Design来重构后端管理页面，Ant Design 团队不是很熟悉，webpack react等用的不多，所以自己花了一天时间，把相关知识点撸了一遍，给团队做了个培训。 下面主要是一个培训的纲领，整个流程可以通畅的跑下来； 主要是webpack+es2015+react+Ant Design。 当然，ant design 自己有一套框架 打包平台，有兴趣的也可以研究。
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
Npm依赖于Node.js，直接下载安装，并配置环境变量 由于个人比较习惯使用 shift+右键 唤起powershell来执行命令，默认powershell不允许执行脚本文件，需要解除此安全策略
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
