webpack高级篇 深碍√TFBOYSˉ_ 2023-09-28 08:48 53阅读 0赞 **目录** 前言: 1.提升开发体验 1.1 是什么? 1.2 为什么? 1.3 怎么用 2.提升 webpack 提升打包构建速度 3.减少代码体积 4.优化代码运行性能 -------------------- ### 前言: ### > **webpack高级使用主要围绕几个方面:** > > **1.提升开发体验** > > **2.提升打包构建速度** > > **3.减少代码体积** > > **4.优化代码运行性能** **这部分的知识很重要,是前端性能优化的重要组成部分,也是面试的高频考点。** **注:webpack几乎所有的配置流程都一样,既:去官网(中文翻译网站经常有错误!)先下载包,然后去config里面配置就完事,本文对此稍作演示,其他请自行查阅配置。** -------------------- ### 1.提升开发体验 ### > #### 使用 `Source Map` 让开发或上线时代码报错能有更加准确的错误提示。 #### #### 1.1 是什么? #### > SourceMap(源代码映射)是一个用来生成源代码与构建后代码一一映射的文件的方案。 > > 它会生成一个 xxx.map 文件,里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了,会通过 xxx.map 文件,从构建后代码出错位置找到映射后源代码出错位置,从而让浏览器提示源代码文件出错位置,帮助我们更快的找到错误根源。 #### 1.2 为什么? #### 开发时我们运行的代码是经过 webpack 编译后的,例如下面这个样子: ![ec309889e0d3435fa4eb84800c5149c2.png][] > 所有 css 和 js 合并成了一个文件,并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多,那么很难去发现错误出现在哪里。 > > 所以我们需要更加准确的错误提示,来帮助我们更好的开发代码。 #### 1.3 怎么用 #### > #### 通过查看[Webpack DevTool 文档open in new window][Webpack DevTool _open in new window]可知,SourceMap 的值有很多种情况. #### > > 但实际开发时我们只需要关注两种情况即可: -------------------- * 开发模式:`cheap-module-source-map` * 优点:打包编译速度快,只包含行映射 * 缺点:没有列映射 module.exports = { // 其他省略 mode: "development", devtool: "cheap-module-source-map", }; * 生产模式:`source-map` * 优点:包含行/列映射 * 缺点:打包编译速度更慢 module.exports = { // 其他省略 mode: "production", devtool: "source-map", }; ### 2.提升 webpack 提升打包构建速度 ### > **使用** **`HotModuleReplacement`****让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快。** > > -------------------- > > **使用** **`OneOf`** **让资源文件一旦被某个 loader 处理了,就不会继续遍历了,打包速度更快。** > > -------------------- > > **使用** **`Include/Exclude`****排除或只检测某些文件,处理的文件更少,速度更快。** > > -------------------- > > **使用** **`Cache`** **对 eslint 和 babel 处理的结果进行缓存,让第二次打包速度更快。** > > -------------------- > > **使用****`Thead`** **多进程处理 eslint 和 babel 任务,速度更快。(需要注意的是,进程启动通信都有开销的,要在比较多代码处理时使用才有效果)** -------------------- ### 3.减少代码体积 ### > **使用 `Tree Shaking` 剔除了没有使用的多余代码,让代码体积更小。** > > -------------------- > > **使用 `@babel/plugin-transform-runtime` 插件对 babel 进行处理,让辅助代码从中引入,而不是每个文件都生成辅助代码,从而体积更小。** > > -------------------- > > **使用 `Image Minimizer` 对项目中图片进行压缩,体积更小,请求速度更快。(需要注意的是,如果项目中图片都是在线链接,那么就不需要了。本地项目静态图片才需要进行压缩。)** -------------------- ### 4.优化代码运行性能 ### > **使用`Code Split` 对代码进行分割成多个 js 文件,从而使单个文件体积更小,并行加载 js 速度更快。并通过 import 动态导入语法进行按需加载,从而达到需要使用时才加载该资源,不用时不加载资源。** > > -------------------- > > **使用 `Preload / Prefetch`对代码进行提前加载,等未来需要使用时就能直接使用,从而用户体验更好。** > > -------------------- > > **使用 `Network Cache` 能对输出资源文件进行更好的命名,将来好做缓存,从而用户体验更好。** > > -------------------- > > **使用`Core-js` 对 js 进行兼容性处理,让我们代码能运行在低版本浏览器。** > > -------------------- > > **使用 `PWA`能让代码离线也能访问,从而提升用户体验。** [ec309889e0d3435fa4eb84800c5149c2.png]: https://img-blog.csdnimg.cn/ec309889e0d3435fa4eb84800c5149c2.png [Webpack DevTool _open in new window]: https://webpack.docschina.org/configuration/devtool/
还没有评论,来说两句吧...