Webpack共0篇 第2页
Webpack
排序
从零开始配置Vue开发环境，Webpack新手贴
vue 官方为了让开发者快速进行开发，提供了vue-cli脚手架，只需简单几步，就能开始vue的开发了。 然而，对项目里的webpack封装和配置了解的不清楚，就容易导致出问题不知如何解决，甚至不会通过...
2年前Webpack5模块联邦微前端方案实践
1.参考资料 1.Module Federation官方文档 2.Module Federation入门 3.Webpack 5：Module Federation 2.Webpack5模块联邦 使用的webpack版本：5.76.2，webpack-cli版本：5.0.1，webapck-dev-serv...
2年前
首屏加载时间优化之在工作中实践
一、背景 作为一个唯唯诺诺的大三前端人终于出去实习了，在公司的第一个需求是针对公司的某个B端后台系统进行初次加载白屏时间优化的，那为什么要进行优化呢？ 1、白屏时间长影响体验效果 这个...
2年前
记一次Vue-CLI生产项目的打包优化
前言 此次是接手一个老项目（老项目大家都懂的，想哭?）；项目里面的依赖繁杂，而且引用也不太规范。就先吐槽吐槽项目，首先：项目里引用了三个UI组件库，Element、view-design、还有一个xxx-ad...
2年前
从零搭建React脚手架（Webpack5+Typescript+Eslint）
前言 React是当前最流行的前端开发框架之一，React可以使前端开发更加便利，有着组件化，虚拟dom，高性能，单向数据流，生态系统丰富等优势。因此应运而生的react脚手架也有很多，一些官方推荐...
2年前
Vue 2.7+Webpack 5.88搭建项目
一、创建项目 mkdir vue-demo cd vue-demo 二、初始化项目 生成package.json文件 npm init 三、引入webpack npm install webpack --save-dev 项目根目录新增webpack.config.js文件： const path...
2年前
【前端工程化】webpack5+vue3+ts+代码规范构建企业级前端项目(一)
目录 前言 初始化项目 webpack基础配置 webpack开发环境配置 webpack打包环境配置 参考 一. 前言 本文是专栏【前端工程化】webpack5+vue3+ts+代码规范构建企业级前端项目系列第一篇，会详细讲解...
2年前
【前端工程化】webpack5+vue3+ts+代码规范构建企业级前端项目(四)
目录 前言 webpack包分析工具 抽取css样式文件 压缩css文件 压缩js文件 合理配置打包文件hash 代码分割第三方包和公共模块 tree-shaking清理未引用js tree-shaking清理未使用css 打包时生成gzip...
2年前
跟着Vue2官文实现一个SSR（SSR新手起步）
前言 Vue.js 服务器端渲染指南 | Vue SSR 指南 (vuejs.org) Demo地址：github.com/vuejs/vue-h… Demo是尤大做得一个博客项目，里面有了官文中大部分提及的Vue SSR必要的一些代码。官文中的代码...
2年前
Vue 项目路由、自定义指令、api方法自动引入资源（require.context使用）
前端项目（当前我以Vue项目为例）当我们把api挂载在main上后 // 将api挂载到vue的原型上 import api from '@/api' Vue.prototype.$api=api 在src下会有一个api文件夹，结构如下： 通常情况下，a...
2年前
使用webpack从零开始手动搭建React项目
自从接触前端以来，每次创建一个新的项目时，为了图方便几乎都是使用create-react-app脚手架来搭建的。到了工作中时，发现公司的项目都是大佬们已经搭建配置好的，根本不需要我去关心项目如何搭...
2年前
webpack开发自定义功能loader
webpack loader 开发 概述 使用webpack来开发一些自定义的loader，可以让我们更加深刻的认识和了解webpack的工作机制是怎么样的。 每一个loader都是一个函数，该函数在loader转换资源的时候调用...
2年前Nuxt.js项目优化实践
前言 前段时间接手的nuxt.js项目，开发时发现项目启动时间长达5分钟左右，非常影响开发效率，于是经过一番研究，找出了几点可优化的项。 经过优化后，项目启动时间提升到了30s左右，以下是我的...
2年前
第 4 章 webpack 性能优化
对于开发环境而言，我们主要优化打包构建速度和优化代码调试。 开发环境性能优化 对于生产环境而言，我们主要优化打包构建速度和优化代码运行的性能。 生产环境性能优化 HMR HMR（Hot Module Re...
2年前一文参透 webpack-bundle-analyzer 插件
webpack-bundle-analyzer 是一个用于分析 webpack 打包结果的插件。它提供了一个可视化的报告，帮助开发人员更好地理解和优化构建产物的大小和依赖关系。 项目背景： 在现代前端开发中，随着项...
2年前
webpack不要硬学，带着这种目的跟思想学习，效率高太多了
前言 通过上篇文章——弄懂这几个概念后，我对webpack有了更新的理解 的讲解，我们大致了解了： 使用webpack过程中出现的一些概念 结合打包过程中出现的概念，浅析了webpack打包流程，让大家对...
2年前
记一次webpack转vite踩坑之路
背景 公司的h5项目越来越大，打包进度展示2万+模块, 尽管从webpack2升级到webpack4，冷启动仍需三分多钟，热更新10s左右，占用电脑内存也大，开发体验较差；查阅了很多资料，决定在运行项目时使...
2年前
深入浅出Webpack配置及Bable
跨域问题 跨域问题和解决方案 1.1.跨域产生的原因 跨域是指去向一个为非本origin(协议、域名、端口任意一个不同)的目标地址发送请求的过程，这样之所以会产生问题是因为浏览器的同源策略限制。...
2年前
mini-webpack实现多个js模块打包到同一个文件下
面试官问：你知道webpack做了什么嘛？ 有一次面试，我真的遇到了面试官问到这个问题。我回答了他，webpack把静态资源按照配置文件进行打包，同时我们可以使用loader来处理特定的文件，用plugin...
2年前
模块联邦实践
在聊模块联邦之前，我们先了解下在多个项目下，前端模块如何复用的 跨项目模块复用方案 1、npm 包 包管理工具对于前端应用来说不可或缺，我们可以将模块上传到 npm 包，在需要的项目中引入，以...
2年前