Vue-cli 是一个官方的脚手架工具，可以快速搭建 Vue.js 项目。而 Webpack 是一个模块打包工具，可以将多个模块打包成一个文件。在前端开发中，Vue-cli 和 Webpack 通常是我们的首选工具，但是默认的打包配置不一定是最优的。本文将介绍一些 Vue-cli + Webpack 打包优化的技巧，让你的项目更快、更高效。
1. 开启 gzip 压缩
gzip 压缩是一种常用的压缩方式，可以有效地减小文件大小，提高页面加载速度。在 Webpack 中开启 gzip 压缩非常简单，只需要使用 compression-webpack-plugin 插件即可。在 Vue-cli 3.x 中，可以在 vue.config.js 中进行配置：
----- ------------------------ - -------------------------------------
-------------- - -
----------------- -
-------- -
--- --------------------------
----- -----------------------
---------- ------
--------------------- -----
--
-
-
-上面的配置表示只对大于 10KB 的文件进行 gzip 压缩，不删除原始文件。
2. 使用 CDN 加速
CDN 是一种常用的加速方式，可以将静态资源部署到全球各地的 CDN 节点，提高用户访问速度。在 Vue-cli 中使用 CDN 加速也非常简单，只需要在 vue.config.js 中配置 publicPath：
-------------- - - ----------- -------------------------- -
上面的配置表示将静态资源部署到 https://cdn.example.com/，可以根据实际情况进行调整。
3. 按需加载
按需加载是一种常用的优化方式，可以将页面划分为多个模块，按需加载，提高页面加载速度。在 Vue.js 中使用按需加载也非常简单，只需要使用 dynamic import 即可。例如：
----- --- - -- -- ------------------- ----- --- - -- -- -------------------
上面的代码表示将 Foo.vue 和 Bar.vue 模块按需加载。
4. 使用 Tree Shaking
Tree Shaking 是一种常用的优化方式，可以将未使用的代码从打包文件中删除，减小文件大小，提高页面加载速度。在 Vue-cli 中使用 Tree Shaking 也非常简单，只需要在 package.json 中配置 "sideEffects": false，并且使用 ES6 模块化语法即可。例如：
-
------- -------------
---------- --------
-------------- ------
--------------- -
------ ---------
-
-上面的配置表示将所有模块都视为无副作用，可以进行 Tree Shaking。
5. 使用缓存
使用缓存是一种常用的优化方式，可以减少页面加载时间，提高用户体验。在 Vue-cli 中使用缓存也非常简单，只需要使用 hard-source-webpack-plugin 插件即可。在 Vue-cli 3.x 中，可以在 vue.config.js 中进行配置：
----- ----------------------- - -------------------------------------
-------------- - -
----------------- -
-------- -
--- -------------------------
-
-
-上面的配置表示使用硬盘缓存，可以提高打包速度。
总结
本文介绍了一些 Vue-cli + Webpack 打包优化的技巧，包括开启 gzip 压缩、使用 CDN 加速、按需加载、使用 Tree Shaking、使用缓存等。这些技巧可以让你的项目更快、更高效，提高用户体验。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/655eb17cd2f5e1655d8d601a