基于webpack项目构建性能优化_mermaid webpack-优快云博客

本文介绍了如何查看VueCLI的默认配置，并分享了针对production环境的配置优化策略，如利用external引入CDN资源，解决DNS预加载限制，使用extract-css插件减少CSS体积等。此外，还探讨了缓存管理和预加载技术，以提升项目性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

欢迎阅读我的文章

你好！我的文章是基于webpck 或者基于vueCli的配置文件做的优化，后续还会持续更新。

知道了vueCli的默认配置我们才知道如何对现有的项目进行配置，查看配置命令：
在package.json 中配置输出默认配置命令

"log": "vue-cli-service inspect --mode production >> log.js"

注意：不要忘记在.gitignore 文件中添加log.js

一个简单的表格是这么创建的：

序号	内容	解决痛点
1	在production 环境下配置external外链cdn，dns-prefetch	.dns-pretch 请求排队。chrom 同一个域名下请求数量不能多余6个。2.打包的chunk-veners文件太大,external webpack 不会打包3、当浏览器解析到preload会立即进行资源的请求，需要注意的是使用preload进行预加载时需要指定文件的类型4、当浏览器解析到prefetch时，不会立即请求资源，会等待浏览器空闲以后再进行资源的请求5.参考文档：https://webpack.html.cn/configuration/externals.html6、采坑 external的文件名要是import 文件在mian.js 中
2	extract-css 插件 ignoreOrder	控制台中的css 路径的warnig
3	hard-source-webpack-plugin 插件配置	配置node_modules 路径缓存hard-sourceWebpack配置更改时，默认情况下会创建缓存。每个缓存都保存所有数据的副本以创建构建，因此它们可能会变得很大。一旦高速缓存被认为“足够旧”，就不太可能被重用，hard-source将删除它以自动释放空间。

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

链接: link.

图片: Alt

带尺寸的图片:

居中的图片: Alt

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：