taylor/webpack5-tutorial
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

push doc

Browse Source
This commit is contained in:
taylor
2024-10-16 17:02:47 +08:00
commit dc507d2a0b
266 changed files with 62650 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/.vuepress/.temp/pages/senior/enhanceExperience.html.js Normal file
View File

@@ -0,0 +1,50 @@
export const data = {
"key": "v-7964f787",
"path": "/senior/enhanceExperience.html",
"title": "提升开发体验",
"lang": "zh-CN",
"frontmatter": {},
"excerpt": "",
"headers": [
{
"level": 2,
"title": "SourceMap",
"slug": "sourcemap",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用",
"children": []
}
]
}
],
"git": {},
"filePathRelative": "senior/enhanceExperience.md"
}
if (import.meta.webpackHot) {
import.meta.webpackHot.accept()
if (__VUE_HMR_RUNTIME__.updatePageData) {
__VUE_HMR_RUNTIME__.updatePageData(data)
}
}
if (import.meta.hot) {
import.meta.hot.accept(({ data }) => {
__VUE_HMR_RUNTIME__.updatePageData(data)
})
}

62
docs/.vuepress/.temp/pages/senior/enhanceExperience.html.vue Normal file
View File

@@ -0,0 +1,62 @@
<template><h1 id="提升开发体验" tabindex="-1"><a class="header-anchor" href="#提升开发体验" aria-hidden="true">#</a> 提升开发体验</h1>
<h2 id="sourcemap" tabindex="-1"><a class="header-anchor" href="#sourcemap" aria-hidden="true">#</a> SourceMap</h2>
<h3 id="为什么" tabindex="-1"><a class="header-anchor" href="#为什么" aria-hidden="true">#</a> 为什么</h3>
<p>开发时我们运行的代码是经过 webpack 编译后的，例如下面这个样子：</p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/</span>
<span class="token doc-comment comment">/******/</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// webpackBootstrap</span>
<span class="token doc-comment comment">/******/</span> <span class="token string">"use strict"</span><span class="token punctuation">;</span>
<span class="token doc-comment comment">/******/</span> <span class="token keyword">var</span> __webpack_modules__ <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token doc-comment comment">/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/less/index.less":
/*!**********************************************************************************************************!*\
!*** ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/less/index.less ***!
\**********************************************************************************************************/</span>
<span class="token doc-comment comment">/***/ ((module, __webpack_exports__, __webpack_require__) => <span class="token punctuation">{</span>
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */</span> __webpack_require__<span class="token punctuation">.</span><span class="token function">d</span><span class="token punctuation">(</span>__webpack_exports__<span class="token punctuation">,</span> <span class="token punctuation">{</span>\n<span class="token comment">/* harmony export */</span> \<span class="token string">"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".box2 {\\n width: 100px;\\n height: 100px;\\n background-color: deeppink;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://webpack5/./src/less/index.less?./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token doc-comment comment">/***/ <span class="token punctuation">}</span>),
// 其他省略
</span></code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><p>所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。</p>
<p>所以我们需要更加准确的错误提示，来帮助我们更好的开发代码。</p>
<h3 id="是什么" tabindex="-1"><a class="header-anchor" href="#是什么" aria-hidden="true">#</a> 是什么</h3>
<p>SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。</p>
<p>它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。</p>
<h3 id="怎么用" tabindex="-1"><a class="header-anchor" href="#怎么用" aria-hidden="true">#</a> 怎么用</h3>
<p>通过查看<a href="https://webpack.docschina.org/configuration/devtool/" target="_blank" rel="noopener noreferrer">Webpack DevTool 文档<ExternalLinkIcon/></a>可知，SourceMap 的值有很多种情况.</p>
<p>但实际开发时我们只需要关注两种情况即可：</p>
<ul>
<li>
<p>开发模式：<code>cheap-module-source-map</code></p>
<ul>
<li>优点：打包编译速度快，只包含行映射</li>
<li>缺点：没有列映射</li>
</ul>
</li>
</ul>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">// 其他省略</span>
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
<span class="token literal-property property">devtool</span><span class="token operator">:</span> <span class="token string">"cheap-module-source-map"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
<li>生产模式：<code>source-map</code>
<ul>
<li>优点：包含行/列映射</li>
<li>缺点：打包编译速度更慢</li>
</ul>
</li>
</ul>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">// 其他省略</span>
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"production"</span><span class="token punctuation">,</span>
<span class="token literal-property property">devtool</span><span class="token operator">:</span> <span class="token string">"source-map"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div></template>

24
docs/.vuepress/.temp/pages/senior/index.html.js Normal file
View File

@@ -0,0 +1,24 @@
export const data = {
"key": "v-3fe9ea34",
"path": "/senior/",
"title": "介绍",
"lang": "zh-CN",
"frontmatter": {},
"excerpt": "",
"headers": [],
"git": {},
"filePathRelative": "senior/README.md"
}
if (import.meta.webpackHot) {
import.meta.webpackHot.accept()
if (__VUE_HMR_RUNTIME__.updatePageData) {
__VUE_HMR_RUNTIME__.updatePageData(data)
}
}
if (import.meta.hot) {
import.meta.hot.accept(({ data }) => {
__VUE_HMR_RUNTIME__.updatePageData(data)
})
}

11
docs/.vuepress/.temp/pages/senior/index.html.vue Normal file
View File

@@ -0,0 +1,11 @@
<template><h1 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h1>
<p>本章节主要介绍 Webpack 高级配置。</p>
<p>所谓高级配置其实就是进行 Webpack 优化，让我们代码在编译/运行时性能更好~</p>
<p>我们会从以下角度来进行优化：</p>
<ol>
<li>提升开发体验</li>
<li>提升打包构建速度</li>
<li>减少代码体积</li>
<li>优化代码运行性能</li>
</ol>
</template>

150
docs/.vuepress/.temp/pages/senior/liftingSpeed.html.js Normal file
View File

@@ -0,0 +1,150 @@
export const data = {
"key": "v-7b858f23",
"path": "/senior/liftingSpeed.html",
"title": "提升打包构建速度",
"lang": "zh-CN",
"frontmatter": {},
"excerpt": "",
"headers": [
{
"level": 2,
"title": "HotModuleReplacement",
"slug": "hotmodulereplacement",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用",
"children": []
}
]
},
{
"level": 2,
"title": "OneOf",
"slug": "oneof",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么-1",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么-1",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用-1",
"children": []
}
]
},
{
"level": 2,
"title": "Include/Exclude",
"slug": "include-exclude",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么-2",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么-2",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用-2",
"children": []
}
]
},
{
"level": 2,
"title": "Cache",
"slug": "cache",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么-3",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么-3",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用-3",
"children": []
}
]
},
{
"level": 2,
"title": "Thead",
"slug": "thead",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么-4",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么-4",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用-4",
"children": []
}
]
}
],
"git": {},
"filePathRelative": "senior/liftingSpeed.md"
}
if (import.meta.webpackHot) {
import.meta.webpackHot.accept()
if (__VUE_HMR_RUNTIME__.updatePageData) {
__VUE_HMR_RUNTIME__.updatePageData(data)
}
}
if (import.meta.hot) {
import.meta.hot.accept(({ data }) => {
__VUE_HMR_RUNTIME__.updatePageData(data)
})
}

537
docs/.vuepress/.temp/pages/senior/liftingSpeed.html.vue Normal file
View File

File diff suppressed because one or more lines are too long

150
docs/.vuepress/.temp/pages/senior/optimizePerformance.html.js Normal file
View File

@@ -0,0 +1,150 @@
export const data = {
"key": "v-5489448c",
"path": "/senior/optimizePerformance.html",
"title": "优化代码运行性能",
"lang": "zh-CN",
"frontmatter": {},
"excerpt": "",
"headers": [
{
"level": 2,
"title": "Code Split",
"slug": "code-split",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用",
"children": []
}
]
},
{
"level": 2,
"title": "Preload / Prefetch",
"slug": "preload-prefetch",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么-1",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么-1",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用-1",
"children": []
}
]
},
{
"level": 2,
"title": "Network Cache",
"slug": "network-cache",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么-2",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么-2",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用-2",
"children": []
}
]
},
{
"level": 2,
"title": "Core-js",
"slug": "core-js",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么-3",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么-3",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用-3",
"children": []
}
]
},
{
"level": 2,
"title": "PWA",
"slug": "pwa",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么-4",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么-4",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用-4",
"children": []
}
]
}
],
"git": {},
"filePathRelative": "senior/optimizePerformance.md"
}
if (import.meta.webpackHot) {
import.meta.webpackHot.accept()
if (__VUE_HMR_RUNTIME__.updatePageData) {
__VUE_HMR_RUNTIME__.updatePageData(data)
}
}
if (import.meta.hot) {
import.meta.hot.accept(({ data }) => {
__VUE_HMR_RUNTIME__.updatePageData(data)
})
}

1833
docs/.vuepress/.temp/pages/senior/optimizePerformance.html.vue Normal file
View File

File diff suppressed because one or more lines are too long

100
docs/.vuepress/.temp/pages/senior/reduceVolume.html.js Normal file
View File

@@ -0,0 +1,100 @@
export const data = {
"key": "v-5460e2da",
"path": "/senior/reduceVolume.html",
"title": "减少代码体积",
"lang": "zh-CN",
"frontmatter": {},
"excerpt": "",
"headers": [
{
"level": 2,
"title": "Tree Shaking",
"slug": "tree-shaking",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用",
"children": []
}
]
},
{
"level": 2,
"title": "Babel",
"slug": "babel",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么-1",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么-1",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用-1",
"children": []
}
]
},
{
"level": 2,
"title": "Image Minimizer",
"slug": "image-minimizer",
"children": [
{
"level": 3,
"title": "为什么",
"slug": "为什么-2",
"children": []
},
{
"level": 3,
"title": "是什么",
"slug": "是什么-2",
"children": []
},
{
"level": 3,
"title": "怎么用",
"slug": "怎么用-2",
"children": []
}
]
}
],
"git": {},
"filePathRelative": "senior/reduceVolume.md"
}
if (import.meta.webpackHot) {
import.meta.webpackHot.accept()
if (__VUE_HMR_RUNTIME__.updatePageData) {
__VUE_HMR_RUNTIME__.updatePageData(data)
}
}
if (import.meta.hot) {
import.meta.hot.accept(({ data }) => {
__VUE_HMR_RUNTIME__.updatePageData(data)
})
}

408
docs/.vuepress/.temp/pages/senior/reduceVolume.html.vue Normal file
View File

File diff suppressed because one or more lines are too long

24
docs/.vuepress/.temp/pages/senior/summary.html.js Normal file
View File

@@ -0,0 +1,24 @@
export const data = {
"key": "v-1d695a4e",
"path": "/senior/summary.html",
"title": "总结",
"lang": "zh-CN",
"frontmatter": {},
"excerpt": "",
"headers": [],
"git": {},
"filePathRelative": "senior/summary.md"
}
if (import.meta.webpackHot) {
import.meta.webpackHot.accept()
if (__VUE_HMR_RUNTIME__.updatePageData) {
__VUE_HMR_RUNTIME__.updatePageData(data)
}
}
if (import.meta.hot) {
import.meta.hot.accept(({ data }) => {
__VUE_HMR_RUNTIME__.updatePageData(data)
})
}

37
docs/.vuepress/.temp/pages/senior/summary.html.vue Normal file
View File

@@ -0,0 +1,37 @@
<template><h1 id="总结" tabindex="-1"><a class="header-anchor" href="#总结" aria-hidden="true">#</a> 总结</h1>
<p>我们从 4 个角度对 webpack 和代码进行了优化：</p>
<ol>
<li>提升开发体验</li>
</ol>
<ul>
<li>使用 <code>Source Map</code> 让开发或上线时代码报错能有更加准确的错误提示。</li>
</ul>
<ol start="2">
<li>提升 webpack 提升打包构建速度</li>
</ol>
<ul>
<li>使用 <code>HotModuleReplacement</code> 让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。</li>
<li>使用 <code>OneOf</code> 让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。</li>
<li>使用 <code>Include/Exclude</code> 排除或只检测某些文件，处理的文件更少，速度更快。</li>
<li>使用 <code>Cache</code> 对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。</li>
<li>使用 <code>Thead</code> 多进程处理 eslint 和 babel 任务，速度更快。（需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果）</li>
</ul>
<ol start="3">
<li>减少代码体积</li>
</ol>
<ul>
<li>使用 <code>Tree Shaking</code> 剔除了没有使用的多余代码，让代码体积更小。</li>
<li>使用 <code>@babel/plugin-transform-runtime</code> 插件对 babel 进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小。</li>
<li>使用 <code>Image Minimizer</code> 对项目中图片进行压缩，体积更小，请求速度更快。（需要注意的是，如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。）</li>
</ul>
<ol start="4">
<li>优化代码运行性能</li>
</ol>
<ul>
<li>使用 <code>Code Split</code> 对代码进行分割成多个 js 文件，从而使单个文件体积更小，并行加载 js 速度更快。并通过 import 动态导入语法进行按需加载，从而达到需要使用时才加载该资源，不用时不加载资源。</li>
<li>使用 <code>Preload / Prefetch</code> 对代码进行提前加载，等未来需要使用时就能直接使用，从而用户体验更好。</li>
<li>使用 <code>Network Cache</code> 能对输出资源文件进行更好的命名，将来好做缓存，从而用户体验更好。</li>
<li>使用 <code>Core-js</code> 对 js 进行兼容性处理，让我们代码能运行在低版本浏览器。</li>
<li>使用 <code>PWA</code> 能让代码离线也能访问，从而提升用户体验。</li>
</ul>
</template>