前一阵子搞了个nest项目，当我开发完一个功能，打算部署到服务器进行测试时，发现它跑不起来，报了一大堆错缺少了很多依赖包。
如果你业务比较复杂，需要使用 webpack 做深度定制，那么常见组合是：项目 - webpack，组件 - gulp。
现在大多数单页应用的视图都是通过 JavaScript代码在浏览器端渲染出来的，但在浏览器端渲染的坏处有：
单页面应用（SPA）在传统的实现）上，面临着首页白屏加载时间过长，seo难以优化的难题。解决这个问题的思路之一就是ssr（服务端渲染）。
我们在 RudderStack 使用的开发方式之一是安全快速地构建，然后根据需要进行优化，这种模式使我们能够优先考虑客户问题，跟上 RudderStack 的快速增长的脚步。
vue.js是构建客户端应用程序的框架，在默认情况下，在浏览器输出Vue组件，进行生成DOM和操作DOM。Vue SSR 就是实现将组件渲染为服务器端的HTML字符串，将他们直接发送给浏览器，最后将这些静态标记“激活”为客户端可应用的应用程序。
如果一个web页面加载内容过多，刷新的时候会有空白页，造成不好的用户体验，但是如果加入骨架屏可以改善这一问题，骨架屏可理解为页面加载前的简单呈现版本，当页面加载完成，骨架屏各个占位区域被实际资源替换，可让用户觉得内容正在加载即将呈现，体验更加流畅。实际应用比较广泛，CSDN，小米商城等很多大型网站都用到了骨架屏方案。
指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程
当前 SPA 架构流行的趋势如日中天，但在 SEO 方面好像一直是个痛点，所以众多流行的 mv* 等框架也为此痛点提出了解决方案。 vue 官方提供了快速构建项目的工具 vue-cli，其方便快捷性众所周知。本文章来分享一下使用vue cli构建项目后如何集成 SSR(server side render 服务器端渲染)，本文主要说明使用两种方式来实现SSR的效果。
这几天花了大量时间终于折腾出一个完美版本，并且是自己构建的webpack配置（之前失败很可能是因为react自带的webpack太复杂，构建服务端代码时有些细节没处理好）
本文作者：IMWeb 吴浩麟 原文出处：IMWeb社区 未经同意，禁止转载 image.png webpack是一个js打包工具，不一个完整的前端构建工具。它的流行得益于模块化和单页应用
webpack是一个js打包工具，不一个完整的前端构建工具。它的流行得益于模块化和单页应用的流行。webpack提供扩展机制，在庞大的社区支持下各种场景基本它都可找到解决方案。本文的目的是教会你用webpack解决实战中常见的问题。
---- webpack 是前端开发者一个跨不过去的编译工具。不过由于他的快速迭代，让很多同学在学一个版本的时候，下一个新版本就发布了，让人感觉非常蛋疼和无奈： “我是谁，我在干嘛，我要做什么？” 不过，如果你已经掌握 webpack 比较老的版本，对于新版本的学习而言，应该只需要 0.5 天的工作量就可以完成。因为，其基本理念都是以 JS 为中心，增加的只是其辅助特性。 webpack 到目前为止已经走过了三个大版本，每个版本之间都，增加了非常多可用的特性，但是每个版本的具体配置项都有些差异，很容易让老版
本文由 IMWeb 团队成员 eden 首发于腾讯内部 KM 论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。 前言 随着前端构架工具的不断发展，提供了很多提高我们的开发体验和开发效率的能力，同时构建已经成为前端技术栈中常见的技术。 webpack 也是众多构建工具中崭露头角一员，早期的 webpack 配置复杂难懂，随着其发展，相关配置也不断简化，性能也不断提高，但是对于深入使用的开发人员，通常它的默认配置并不适用于业务开发，需要针对自己业务调整适配。 你对 webpack 了解多少？如何针对业务
今天是我入职第一天，在简短的内部培训了一上午后，前端leader让我先了解下什么是vue的服务器端渲染（SSR）。
2、在src/index.html入口文件中通过script引用需要使用的js（参见以下第8-10行代码）
externals和DllPlugin都是为了分离模块诞生，通过他们可以将一些第三方模块抽离出来，打包的时候不需将某些三方库一起打包如vue、vue-router
最近无论是在公司还是自己研究的项目，都一直在搞 H5 页面服务端渲染方面的探索，因此本文来探讨一下服务端渲染的必要性以及其背后的原理。
前言 . 以前在用koa写server的时候，发布简直是噩梦。需要将src里面的全部文件都覆盖掉，config配置文件也要覆盖，稍有不慎就会线上报各种各样的问题，然后就得回退，本地调好在发布。偶然看见一篇文章讲如何使用webpack打包koa app，惊为天人，原来webpack也能打包后台。这在以前想都没想过。 关键问题 一：所有node_modules里的模块都不进行打包 webpack的核心功能是将引用的各个模块打到一个文件里，并会将各种规范的模块进行统一的模块化处理(webpack规范)。 然而
来到这家公司之后，一直在使用webpack，也写了不少笔记，但是都比较零散，现在决定整理一下webpack相关的知识点，由浅入深，方便自己后续查漏补缺，后续会一直更新。
今天的投稿人是鹅厂的Casta Mo 这里附上他的github链接... https://github.com/CastaMo 欢迎留言、转发！ 1. 项目背景 我们前端团队近期在为腾讯云DSA业务搭建内部运营运维系统【简称YY-DSA】，既然是内部系统，我们就可以“为所欲为”地选技术栈，搭框架，但要遵循以下约定： - 项目架构清晰，各个模块各司其职、互不耦合或者尽可能降低耦合度。 - 在确保架构稳定的前提下，尽可能提升整体的效率，包括应用程序的效率以及研发流程的效率，而牺牲流程效率来换取程序效率
主要借助的是html-webpack-plugin这个插件以及webpack externals这个属性
压缩项目打包后的体积大小、提升打包速度，是前端性能优化中非常重要的环节，笔者结合工作中的实践总结，梳理出一些 常规且有效 的性能优化建议
前言 在http1的时代，比较常见的一种性能优化就是合并http的请求数量，通常我们会把许多js代码合并在一起，但是如果一个js包体积特别大的话对于性能提升来说就有点矫枉过正了。而如果我们对所有的代码进行合理的拆分，将首屏和非首屏的代码进行剥离，将业务代码和基础库代码进行拆分，在需要某段代码的时候再加载它，下次若再需要用则从缓存中读取，一来可以更好地使用浏览器缓存，再者就是可以提高首屏加载速度，很好提升用户的体验。 核心思想 业务代码和基础库的分离 这个其实很好理解，业务代码通常更新迭代很频繁，而基础库通常
记住，依赖一定要安装在 devDependencies 下，否则会增大你的打包体积
2、 修改build/webpack.base.conf.js文件，通过externals选项加载外部扩展，引入依赖库，不需要webpack处理
vue-server-renderer 是vue srr 服务器端渲染的核心模块，我们会使用koa搭建服务器。
在做React开发时，经常需要引入react和react-dom基础库，这样在打包的时候速度就会比较慢，这种情况下我们可以将这些基础库忽略掉，将它们通过CDN的方式直接引入，而不打包到bundle文件里面去。
webpack是如何打包资源优化，你有了解吗？或者一个经常被问的面试题，首屏加载如何优化，其实无非就是从http请求、文件资源、图片加载、路由懒加载、预请求，缓存这些方向来优化，通常在使用脚手架中，成熟的脚手架已经给你做了最大的优化，比如压缩资源，代码的tree shaking等。
随着构建体系不断完善、构建体验不断优化，webpack 已经逐渐成为了前端构建体系的一大霸主，对于工作中的真正意义上的前端工程项目，webpack 已经成为了我们前端构建技术选型的不二选择，包括 create-react-app 以及 vue-cli 等等业内常见的脚手架工具的构建体系，也都是基于 webpack 进行了上层封装。但随着业务代码不断增加，项目深度不断延伸，我们的构建时长也会因此不断增加。渐渐的，总会有人抛出这样的结论：webpack 构建太慢了、太“重”了。就以笔者本次近期为团队优化的项目为例，如下图所示，我们可以看到，随着项目的不断堆砌以及一些不正确的引用，团队内的项目单次构建时长已经达到了40s，这就造成了工程师如果需要重启 devServer 或者执行 build，都会造成很不好的体验。
低代码开发平台（LCDP）是无需编码（0 代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。这两年越来越多的公司和开发人员开始自研低代码平台来达到降本提效的目的。今天和大家分享一下低代码平台开发过程中遇到一个问题和对应的解决思路。
在使用 Webpack 时，如果不注意性能优化，可能会产生性能问题，会导致在开发体验上不是非常丝滑，性能问题主要是编译速度慢，打包体积过大，因此性能优化也主要从这些方面来分析。本文主要是自己平时的工作积累和参考别人的文章，而进行总结，基于 Webpack4 版本。
在CQM平台开发时，把demo网站给同事体验，都纷纷反馈第一次打开页面的时候需要等待很久，页面一直在转菊花。作为一个为韩国头部厂商提供优质服务的网站，接到这种反馈，这不是啪啪打脸吗。
许多刚开始接触create-react-app框架的同学，不免都会有个疑问：如何在不执行eject操作的同时，修改create-react-app的配置。今天胡哥就来带大家一起来看看这个问题~
如果我们对所有的代码进行合理的拆分，将首屏和非首屏的代码进行剥离，将业务代码和基础库代码进行拆分，在需要某段代码的时候再加载它，下次若再需要用则从缓存中读取...
http1.1下面分割的chunk也不宜太多，因为在同一个域下面的资源并发下载的资源数量是有限的，比如chrome大约是6个资源同时下载，这6个资源中必须要有某个资源下载完毕后才会下载其他资源，但也不一定非要少于6个，因为某些资源可能直接读取内存，某些资源可以通过cdn从别的域中读取。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
低代码开发平台（LCDP）是无需编码（0代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。这两年越来越多的公司和开发人员开始自研低代码平台来达到降本提效的目的。今天和大家分享一下低代码平台开发过程中遇的一个问题和对应的解决思路。
如果没有全局安装@vue/cli-init，还需要先安装@vue/cli-init
Vue-Cli脚手架会有webpack的很多默认行为，因此我们得知道基于Vue-Cli的项目，当前的webpack都配置了啥，然后才能做针对性的分析与优化。
开发环境优化 HMR 模块热替换 devServer设置hot: true style-loader 已实现 webpack.HotModuleReplacementPlugin source map 建立源码与构建代码之间的映射关系，快速定位错误在源码中的位置 生产环境优化（构建时优化 & 运行时优化） 缓存策略 配置babel-loader时，设置cacheDiretory为true，开启babel缓存，之后webpack在打包时，只会对修改过的模块重新编译，其他模块读取babe
平时用 webpack 可能不会有太大问题，可一旦你开发的包被别人引用的时候，就会存在问题；我最近遇到这么一个场景耗费我很多时间去重新学习 webpack 的打包输出。
1. 导语 github仓库 https://github.com/Rynxiao/webpack-test 1.1 什么叫做webpack webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules. 简单的概括就是：webpack是一个模块打包工具，处理模块之间的依赖同时生成对应模块的静态资源。 1.2 web
看到github issue 分析，可以利用webpack externals解决这个问题。
Vue官方的脚手架工具Vue Cli有了一次较大的更新，相比于2.x版本，新版本3.x中对项目的搭建，相关包、插件的安装都有了很大的不同。本文即立足于此，选择@vue/cli 3.x版本的脚手架工具，动手实践从0到1搭建Vue项目，包含了项目的初始化，以及Vue全家桶(VueRouter/Vuex/Axios/CSS预处理器)的相关配置。
东东是一名前端工程师，主要用 React 技术栈，用了多年之后想深入一下，所以最近开始看 React 源码。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
