项目优化相关

1闪屏优化

1、问题：通��js引入css文件打包后js通过生成style标签的形式引入，网络过慢的情况下页面就会出现先显现html后展现样式的状况

（）

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式

这样对于网站来说，会出现闪屏现象，用户体验不好

（）

我们应该是单独的 Css 文件，通过 link 标签加载性能才好

优化：【尚硅谷webpack5笔记base部分-CSDN博客】中提取 Css 成单独文件部分

通过安装相关插件然后在webpack中进行配置

npm i mini-css-extract-plugin -D

2兼容性优化postcss

 【尚硅谷webpack5笔记base部分-CSDN博客】中Css 兼容性处理部分

1. 下载包

npm i postcss-loader postcss postcss-preset-env -D

• 1

  2. 配置

  • webpack.prod.js

  • 3. 控制兼容性

    我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。

    {  // 其他省略  "browserslist": ["ie >= 8"]}

    想要知道更多的 browserslist 配置，查看browserslist 文档

    实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：

    {  // 其他省略  "browserslist": ["last 2 version", "> 1%", "not dead"]}

    4. 合并配置

    webpack.prod.js

    3、css压缩

     【尚硅谷webpack5笔记base部分-CSDN博客】中Css 压缩部分

    4、sourceMap提高开发效率

    [尚硅谷webpack5笔记2-CSDN博客]SourceMap

    是什么

    SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。

    它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。

    怎么用

    通过查看Webpack DevTool 文档可知，SourceMap 的值有很多种情况.

    但实际开发时我们只需要关注两种情况即可：

    开发模式：cheap-module-source-map

    优点：打包编译速度快，只包含行映射

    缺点：没有列映射

    5、打包构建速度HotModuleReplacement

    [尚硅谷webpack5笔记2-CSDN博客]提升打包构建速度

    6、oneOf

    [尚硅谷webpack5笔记2-CSDN博客]OneOf

    为什么

    打包时每个文件都会经过所有 loader 处理，虽然因为 test 正则原因实际没有处理上，但是都要过一遍。比较慢。

    是什么

    顾名思义就是只能匹配上一个 loader, 剩下的就不匹配了。

    7、include和exclude

    [尚硅谷webpack5笔记2-CSDN博客]Include/Exclude

    为什么

    开发时我们需要使用第三方的库或插件，所有文件都下载到 node_modules 中了。而这些文件是不需要编译可以直接使用的。

    所以我们在对 js 文件处理时，要排除 node_modules 下面的文件。

    是什么

    include

    包含，只处理 xxx 文件

    exclude

    排除，除了 xxx 文件以外其他文件都处理

    8、cache

    [尚硅谷webpack5笔记2-CSDN博客]cache

    为什么

    每次打包时 js 文件都要经过 Eslint 检查 和 Babel 编译，速度比较慢。

    我们可以缓存之前的 Eslint 检查 和 Babel 编译结果，这样第二次打包时速度就会更快了。

    是什么

    对 Eslint 检查 和 Babel 编译结果进行缓存。

    9、Thead

    [尚硅谷webpack5笔记2-CSDN博客]Thead

    为什么

    当项目越来越庞大时，打包速度越来越慢，甚至于需要一个下午才能打包出来代码。这个速度是比较慢的。

    我们想要继续提升打包速度，其实就是要提升 js 的打包速度，因为其他文件都比较少。

    而对 js 文件处理主要就是 eslint 、babel、Terser 三个工具，所以我们要提升它们的运行速度。

    我们可以开启多进程同时处理 js 文件，这样速度就比之前的单进程打包更快了。

    是什么

    多进程打包：开启电脑的多个进程同时干一件事，速度更快。

    需要注意：请仅在特别耗时的操作中使用，因为每个进程启动就有大约为 600ms 左右开销。

    怎么用

    我们启动进程的数量就是我们 CPU 的核数。

    10、减少代码体积

    [尚硅谷webpack5笔记2-CSDN博客]减少代码体积

    Tree Shaking

    为什么

    开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。

    如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。

    这样将整个库都打包进来，体积就太大了。

    是什么

    Tree Shaking 是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。

    注意：它依赖 ES Module。

    怎么用

    Webpack 已经默认开启了这个功能，无需其他配置。

    Babel

    
    为什么

    Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！

    Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。

    你可以将这些辅助代码作为一个独立模块，来避免重复引入。

    是什么

    @babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。