Vue-CLI 3配置打包优化的关键点（推荐）

简介：
本文将详细介绍使用Vue-CLI 3进行项目构建时的一些关键配置和优化技巧，帮助开发者提升应用性能。 Vue-cli 3配置打包优化要点涵盖了对Vue项目构建工具的配置进行优化的一系列方法和技巧。这些方法的主要目的是提高项目的性能、降低构建后文件的大小、减少加载时间，从而提升用户体验。 1. 路由懒加载：在Vue项目中，路由懒加载是一种常见的优化手段。其核心思想是将路由对应的组件进行代码分割，并按需加载。当用户访问某个路由时，相关的组件才从服务器下载到本地。这样可以有效减少首次加载的资源量并加快应用启动速度。 2. 代码压缩：在生产环境中通过一些工具（如UglifyJS Webpack Plugin）来移除注释、空白字符和缩短变量名等操作称为代码压缩，以减小文件体积。这一过程可以在vue.config.js中的configureWebpack属性中进行配置，并专门针对生产环境的构建。 3. 引用别名设置：在Vue项目中，通过设置资源引用别名可以简化代码并提高可读性。这可以通过在vue.config.js中使用configureWebpack来实现，在引用组件或模块时更加方便快捷。 4. 插件按需引入：不将整个库全部打包进项目而是只引入需要的部分称为按需引入，这样可以显著减少打包体积。例如，可以在Vue项目中通过这种方式减轻应用负担（以element-ui为例）。 5. SCSS配置优化：全局引入一个scss配置文件有时会导致样式冗余。使用sass-loader可以帮助进行预处理，在组件中直接使用预设的样式变量而无需每个组件单独引入。 6. 减少HTTP请求数量：在构建过程中，打包出的文件数量可能会非常多，导致HTTP请求过多。可以通过移除vue.config.js中的某些插件来减少不必要的请求（例如prefetch和preload）。 7. 公用代码提取与CDN加载：将所有依赖项打包成一个单独的文件并使用CDN进行加载称为公用代码提取。这可以降低服务器负载，加快用户访问速度。建议在生产环境中使用CDN加载Vue、Vue Router等库的压缩版以实现这一目标。 以上介绍的打包优化要点可显著提升Vue应用的加载速度和运行效率。开发者应根据自己的项目需求和资源大小合理选择合适的优化策略，并持续关注最新的优化实践，因为随着技术的发展这些方法和技术会不断变化。