关于vue-cli 3配置打包优化要点（推荐）

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