怎样做分销网站,哪个公司做的网站好,网站建设中面包屑导航的特点,京东网站推广方式1闪屏优化
1、问题#xff1a;通过js引入css文件打包后js通过生成style标签的形式引入#xff0c;网络过慢的情况下页面就会出现先显现html后展现样式的状况 Css 文件目前被打包到 js 文件中#xff0c;当 js 文件加载时#xff0c;会创建一个 style 标签来生成样式 这样对…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 -D1
2. 配置
webpack.prod.js 3. 控制兼容性 我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。 {// 其他省略browserslist: [ie 8]
} 想要知道更多的 browserslist 配置查看browserslist 文档 以上为了测试兼容性所以设置兼容浏览器 ie8 以上。 实际开发中我们一般不考虑旧版本浏览器了所以我们可以这样设置 {// 其他省略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 并且使所有辅助代码从这里引用。
