cli项目页面白屏时间优化

使用 Vue CLI 生成的项目已经内置了许多优化措施，Vue CLI 提供的是"通用"优化，要进一步提升项目性能，尤其是首屏加载时间，仍需针对项目特点进行一些额外配置。

Vue CLI 已处理和需要关注的优化点：

优化方向	具体措施	Vue CLI 默认情况	是否需要额外处理？
代码分割	异步组件 (路由懒加载)	支持（需用户配置路由）	✅ 需手动配置路由懒加载
	`SplitChunks` 优化	已启用（自动分离 node_modules 等）	⚠️ 可根据需求调整 `cacheGroups` 配置
Tree Shaking	移除未引用代码	已启用（生产模式构建时）	✅ 确保使用 ES2015 模块语法，避免副作用干扰
压缩混淆	JS、CSS 压缩	已启用（使用 TerserWebpackPlugin 等）	⚠️ 可调整压缩选项或禁用（非必要不推荐）
Source Map	生产环境生成 `.map` 文件	默认生成（利于调试，但增大体积）	✅ 建议关闭（`productionSourceMap: false`）
缓存优化	文件名哈希（长期缓存）	已配置	⚠️ 通常无需改动

🚀 必做优化项

路由懒加载 ：这是 Vue CLI 支持但需要你手动配置的优化。通过将不同路由对应的组件分割成不同的代码块，只在访问对应路由时才加载相关组件，能显著减少初始加载时间。
javascript 复制代码
```
// 将 import Home from './views/Home.vue'
// 改为
const Home = () => import('./views/Home.vue')
```
生产环境关闭 Source Map ：构建生成的 .map 文件主要用于生产环境调试，但会增大打包体积。在 vue.config.js 中设置 productionSourceMap: false 可以显著减少打包后的文件体积。
CDN 引入外部库 ：将 vue, vuex, vue-router, element-ui 等稳定的大型依赖通过 CDN 方式引入 ，而非打包进 vendor.js，能大幅减小构建文件体积，提升加载速度，并利用浏览器缓存机制。
- 在 index.html 中引入 CDN 链接。
- 在 vue.config.js 中配置 externals：
  javascript 复制代码
```
configureWebpack: {
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'element-ui': 'ELEMENT',
    // 其他库...
  }
}
```
- 注意：使用 CDN 后，需确保在本地开发中注释掉或移除这些库的 import 语句，并通过 npm uninstall 卸载相应 npm 包。

启用 Gzip 压缩 ：在 Web 服务器层面对静态资源进行 Gzip 压缩，能有效减少传输体积。虽然 Vue CLI 项目可通过 compression-webpack-plugin 预生成 .gz 文件，但更常见的做法是直接在服务器（如 Nginx）上开启 Gzip 压缩。

nginx 复制代码

# nginx.conf 中 http 模块配置
gzip on;
gzip_static on; # 如果使用了预生成的 .gz 文件
gzip_min_length 1024;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

按需引入组件库 ：对于 element-ui, ant-design-vue, vant 等大型组件库，全部引入会显著增加包体积。应使用按需引入（通常借助 babel-plugin-component 或库本身提供的插件）。

javascript 复制代码

// babel.config.js 示例 (element-ui)
module.exports = {
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}
// 然后在代码中按需引入组件
import { Button, Select } from 'element-ui'
Vue.use(Button).use(Select)

分析打包结果 ：使用 Vue CLI 内置的 --report 命令构建项目，生成分析报告，可视化查看各模块大小，找出优化重点。
bash 复制代码
```
npm run build -- --report
```

可选优化项

这些优化能进一步提升性能或开发体验，你可以根据项目情况和需求选择。

预渲染 (Prerender) ：对于静态内容较多的页面，可使用 prerender-spa-plugin 等在构建时生成静态 HTML，利于 SEO 和初速加载。

bash 复制代码

npm install --save-dev prerender-spa-plugin

javascript 复制代码

// vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/', '/about', '/contact'], // 需要预渲染的路由
      })
    ]
  }
}

DLL 插件（适用于大型项目） ：通过 DllPlugin 和 DllReferencePlugin 将不常变化的第三方库提前单独打包编译，提升后续构建速度。Vue CLI 默认未集成此功能，需手动配置。配置相对复杂，对于中小型项目，构建速度提升可能不明显。

图片优化：

使用 WebP 等现代图片格式（需考虑兼容性）。
对图片进行压缩（可使用 image-webpack-loader）。

bash 复制代码

npm install --save-dev image-webpack-loader

javascript 复制代码

// vue.config.js
chainWebpack: (config) => {
  config.module
    .rule('images')
    .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({
      mozjpeg: { progressive: true, quality: 65 },
      optipng: { enabled: false },
      pngquant: { quality: [0.65, 0.9], speed: 4 },
      gifsicle: { interlaced: false },
      webp: { quality: 75 }
    })
}

移除 console.log ：生产环境移除 console.log 等调试代码，减小文件体积。

javascript 复制代码

// vue.config.js
config.optimization.minimizer('terser').tap((args) => {
  args[0].terserOptions.compress.drop_console = true
  return args
})

实践总结

优化是一个持续的过程，没有一劳永逸的银弹。对于 Vue CLI 项目：

首要任务 ：实施路由懒加载 、CDN 引入大型库 、启用 Gzip 压缩 、按需引入组件库 和关闭生产环境 Source Map。这些通常能带来最显著的收益。
进阶选择 ：根据项目规模和发展阶段，考虑预渲染 、DLL 优化 （大型项目）或更精细的图片优化。
持续监控 ：定期使用 --report 分析包内容，确保优化方向正确。