webpack

一、项目配置

1. 配置

• 安装需要的包
• 在项目中通过 .babelrc 或者 babel.config.js 进行配置
• presets ：是预设配置，把es6 语法 转为 es5 语法
• env：根据环境进行配置
• ${\textcolor{red}{babel原理：}}$
  • 将代码转换为AST语法树
    1. 将AST语法树进行遍历(babel-traverse),遍历的过程进行更新\添加\删除等等
    2. 将处理的AST语法树转为新的js代码

2. rem适配

${\textcolor{red}{核心原理：}}$ 1 rem = 根节点（html）字体大小，在不同的屏幕小通过修改根节点字体大小来实现适配。

${\textcolor{red}{项目中：}}$ 配置 flexible 动态修改 html 的字体大小，开发环境使用 px，上线使用 rem，可以使用postcss-px-to-rem 进行转化。

二、打包优化

1. 移除 console

• babel的env的中在生产环境配置移除console的插件。
• babel-plugin-transform-remove-console

2. sourcemap

• 对打包压缩后的文件进行映射，从而可以让项目出现问题的时候，精确定位到开发代码的某一行，同时它会产生很多 map 文件，因此生产阶段需要通过 productionSourceMap:false关闭。

3. splitChunks

将公共代码进行提取，(打包分包)

• 因为 webpack 在打包时如果一个文件在很多文件中被使用，那么他会被打包很多次。
• config.optimization.splitChunks({})
• 可以根据 chunks配置段 进行对提取方式的配置
  • all：不管同步还是异步都提取一个文件。
  • initial：同步提取一次，异步提取一次，一共两次。
  • async：只提取异步加载的模块。
• cacheGroups：提取配置方案
  • name：生成的名
  • test：匹配的路径或资源名称
  • chunks：单独进行chunks
  • priority：优先级，数越大，优先级越大。
  • reuseExistingChunk：如果要提取的模块已存在直接复用
  • minChunks：最小引用次数

4. prefetch

• vue/cli 默认开启了 prefetch ，在加载首页的时候，会提前获取用户可能访问的资源，进行提前加载其他路由模块。
• 如果在移动端，此配置可能会浪费用户的流量，因此需要通过关闭，config.plugins.delete('prefetch')

5. 打包成 gZip

• 通过 compression-webpack-plugin将文件打包成压缩包， 在 chainwebpack 中配置，可以通过配置项修改打包阀值，修改文件名或者其他配置的,需要服务器Nginx配置。

6. runtimeChunk

• runtime 是运行时代码，即异步加载的代码。（例如路由懒加载）这些代码一般都是从主模块分离，当不设置 runtimeChunk 时候，即使只是运行时代码发生变换，重新打包，所有文件包括主模块的hash值都会变化，浏览器会断定这些内容都为变化的文件，因此无法使用缓存，也就会导致缓存失效。
• 如果开启 config.optimization.runtimeChunk('single')，打包之后，如果运行时代码发生变化，那么只会改变 runtime 文件。而打包后主模块就不会发送变化。那么主模块就可以使用强缓存。
• 可以利用script-ext-html-webpack-plugin将runTimeChunk代码生成到行内，因为单独的 文件会发送新的请求，而行内只会加载数据。

8. image-webpack-loader

• 图片的打包压缩。

9. 路由懒加载

• 将每个路由进行单独的打包。

  10. webpack 排除打包

• externals 配置根据环境进行忽略打包

11. 引入CDN资源

• 经过上面的忽略生产环境的打包，再引入CDN资源，我们会发现，此时开发环境的externals并没有忽略，有两套资源，会产生冲突。

• 因此，我们需要根据环境按需引入CDN资源。
• 在模板中进行环境区分

• 我们需要在 html 进行环境的区分，只在线上环境引入CDN资源。
• 通过 html-webpack-plugin 将模板html打包生成另一个html，并且将打包的js/css自动引入。
• 在 vue.config.js 中进行自定义配置，将环境变量保存到该插件上，然后通过该插件处理模板，并且拿到html-webpack-plugin 上的环境变量。

1. *<% htmlWebpackPlugin %> *在插件的文档中可以查询到htmlWebpackPlugin
2. 在vue.config.js中给htmlWebpackPlugin 传递参数vue cli

12. tree-shaking

1. 处理掉未引用的代码。（进行按需引入，把多余的忽略）

三、首屏优化

• sourcemap
• splitChunks
• runtimechunk
• 路由懒加载
• gZip
• image-webpack-loader
• CDN资源
• ssr服务端渲染
  • 因为如果是spa加载的话，html文件只有简单的id为app的标签，主要内容实际上是打包在了js文件，通过js将组件渲染到html上，不利于seo
  • 而且首屏加载会慢，虽然开启了路由懒加载，但是也需要js加载完毕，才能将组件渲染到页面。
  • 而ssr服务端会把首页解析好，返回给浏览器，模板html中不仅仅是一个id为app的标签，还可以结合nuxt。
• Nuxt
  • nuxt是基于vue的一个通用型ui框架。同时也集成了服务端渲染。
  • 当我们在create（）中获取后台数据，其实是客户端获取的，如果我们要在服务端渲染的话那就要使用 ` asyncData(context,callback) ，它会在组件创建之前执行，根据 callback(null,{key值：数据})` 来接收数据，或者没有 ${\textcolor{red}{callback}}$ 参数可以直接 return 数据。
  • 在 nuxt.config.js 中对 seo 进行优化，在 ${\textcolor{red}{head选项}}$ 参数中配置。
  • 也可以在想要配置的页面可以通过 ` head(){}` 进行自定义配置。

四、打包部署

1.

• 运行 run build 进行打包，进行打包优化，把打包之后的 dist 文件交给后端

2.

• 自测完成之后，将代码合并到 development 分支，因为 development 是受保护的，所以需要进行合并申请，审核通过之后，代码合并到 release 分支，测试人员进行自动化测试，从 release 合并到 master ，从 master 发布一个 tag 发布到线上，其实它是会自动打包部署的（gitlab+docker+Jenkins）

3. webpack打包

1. 执行package.json 中的打包命令
2. 在webpack.config.js 中
3. 读取配置文件，根据配置文件读取配置参数（入口出口等）。
4. 找到入口文件（main.js）根据import对文件依赖进行查找。
5. 当遇到 css、less、sass，vue等会调用loader编译成标准的JS代码，遇到高级JS通过babel转化为低级js，使用HtmlWebpackPlugin进行html的生成，然后对JS代码进行依赖分析，生成一颗关系树。
6. 文件输出，通过对应css插件对css进行单独打包，通过output实现多出口打包。

五 、工程化思想

• 通过定义一个环境变量（不同环境下定义一个同名数据，在不同环境下值不同）来实现工程化的切换生产/测试/开发所用到的基准地址。

六、webpack 和 vite 的区别

1. webpack会==先打包，然后启动开发服务器==，请求服务器时直接给予打包结果。而vite是直接启动开发服务器，请求哪个模块再==对该模块进行实时编译==。
2. 由于现代浏览器本身就支持ES Module，会==自动向依赖的Module发出请求==。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。由于vite在==启动的时候不需要打包==，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种==按需动态编译的方式==，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
3. 在HMR（热更新）方面，当改动了一个模块后，仅需让浏览器==重新请求该模块==即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。当需要打包到生产环境时，vite使用传统的rollup进行打包，因此，vite的主要优势在开发阶段。另外，由于vite利用的是ES Module，因此在代码中不可以使用CommonJS

• webpack 真正的打包: 先读取配置文件,根据配置文件的规则进行打包,读打包的入口文件,根据入口文件的依赖进行打包,js转低级语法:babel,三方文件:loader,html:html-webpack-plugin,css文件的抽离:mini-css-extract-plugin,开发期间:webpack会先进行打包
• vite: Vite 以 原生 ESM(opens new window)方式提供源码。这实际上是让浏览器接管了打包程序的部分工作。
• Vite 只需要在浏览器请求源码时进行转换并按需提供源码。
• 根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

  七、使用GithubPages进行打包之后的自动部署

  1. 如果之前有部署过 用户名.github.io 这样的博客的话，可以以第一条为例，否则以第二条为例。
  1. 如果之前使用过上述域名，可以重新创建一个仓库，本次以仓库 vueViteAdmin 为例：
     • 本地仓库和远程仓库进行连接 git remote add origin https://github.com/TCIano/vueViteAdmin.git
     • 完成连接之后创建名为 ==gh-pages==的分支，如图：![[Pasted image 20230410101248.png]]

​