目录 前言 初始化项目 配置基础版vue3+ts环境 常用功能配置 优化构建速度 优化构建结果文件 总结 全文概览 一. 前言 本文是专栏《前端工程化》第8篇文章，会持续更新前端工程化方面详细高质量的...

本文内容基于webpack 5.74.0版本进行分析 由于webpack5整体代码过于复杂，为了减少复杂度，本文所有分析将只基于js文件类型进行分析，不会对其它类型（css、image）进行分析，所举的例子也都是...

前端项目（当前我以Vue项目为例）当我们把api挂载在main上后 // 将api挂载到vue的原型上 import api from '@/api' Vue.prototype.$api=api 在src下会有一个api文件夹，结构如下： 通常情况下，a...

跨域问题 跨域问题和解决方案 1.1.跨域产生的原因 跨域是指去向一个为非本origin(协议、域名、端口任意一个不同)的目标地址发送请求的过程，这样之所以会产生问题是因为浏览器的同源策略限制。...

前言 本篇围绕 webpack 做性能优化，分为两个方面：构建时间优化、构建体积优化 构建时间优化 缩小范围 我们在使用 loader 时，可以配置 include、exclude缩小 loader 对文件的搜索范围，以此来...

前言 webpack 我们每天都在用，但是Tree Shaking知道多少呢，今天就来唠一唠他都帮我们干了些什么？ 名词解释： Tree Shaking 是一种用于精确打包 JavaScript 应用程序的优化技术，它通过静态分...

目录 前言 构建耗时分析 开启持久化存储缓存 开启多线程loader 配置alias别名 缩小loader作用范围 精确使用loader 缩小模块搜索范围 devtool模式配 其他优化配置 总结 1. 前言 从2020年10月10日...

本文旨在帮助大家对快速上手Webpack，并对其核心思想有着基本逻辑，想了解更多进阶技巧请持续关注我的专栏。 初始化项目 新建一个空文件夹testWebpack 进入testWebpak目录，分别执行以下命令 np...

Webpack相对其他打包器不同的地方 Webpack忽略具体资源类型之间的差异，将所有代码/非代码文件都统一看作Module——模块对象，以相同的加载、解析、依赖管理、优化、合并流程实现打包，并借助Lo...

简介 说到webpack的性能优化，其实就是从时间层面与体积层面入手。对于时间层面主要就是优化webpack的构建速度（缩短构建时间）。对于体积层面主要就是优化webpack的构建结果（缩小构建结果）。...

大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在 github与好文 TypeScript知识点和99个类型体...

1.webpack的概念及主要功能 概念： WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并...

目录 前言 webpack包分析工具 抽取css样式文件 压缩css文件 压缩js文件 合理配置打包文件hash 代码分割第三方包和公共模块 tree-shaking清理未引用js tree-shaking清理未使用css 打包时生成gzip...

一、创建项目 mkdir vue-demo cd vue-demo 二、初始化项目 生成package.json文件 npm init 三、引入webpack npm install webpack --save-dev 项目根目录新增webpack.config.js文件： const path...

前言 此次是接手一个老项目（老项目大家都懂的，想哭?）；项目里面的依赖繁杂，而且引用也不太规范。就先吐槽吐槽项目，首先：项目里引用了三个UI组件库，Element、view-design、还有一个xxx-ad...

前言 作为前端开发者都会遇到一个问题: 前端代码发版后用户资源获取失败。平时代码发布上线时，避免不了客户同时在使用中的情况。 那么解决这个问题的前提，我们需要来认识一下打包后产物的几种...