Vue CLI 首屏优化技巧

https://www.cnblogs.com/royal6/p/12988252.html
要首屏优化，首先你要知道有哪些东西可以优化，你可以生成打包报告进行查看。
在package.json中，npm run build命令中添加如下命令，生成一份报告

根据这份报告，你就知道有哪些文件需要优化了。

一般的优化我们可以在vue.config.js里面优化
configureWebpack 和 chainWebpack
在 vue.config.js 导出的配置对象中，新增 configureWebpack 或 chainWebpack 节点，来自定义 webpack 的打包配置。

在这里， configureWebpack 和 chainWebpack 的作用相同，唯一的区别就是它们修改 webpack 配置的方 式不同：

1.chainWebpack 通过链式编程的形式，来修改默认的 webpack 配置
2.configureWebpack 通过操作对象的形式，来修改默认的 webpack 配置
两者具体的使用差异，可参考如下网址： https://cli.vuejs.org/zh/guide/webpack.html#webpack-相关

接下来就是一些优化的技巧
1.路由懒加载

  {
   
    // 首页
    path: '/',
    name: 'Home',
    components: {
   
      default: () => import('@/views/home/index.vue'),
    },
    meta: {
    title: '111' }
  },

2.关闭预加载模块prefetch(预先加载模块)

因为 vuecli 3默认开启 prefetch(预先加载模块)，提前获取用户未来可能会访问的内容
在首屏会把这十几个路由文件，都一口气下载了
所以我们要关闭这个功能，在 vue.config.js中设置

 chainWebpack: config => {
   
    config.plugins.delete('preload') 
    config.plugins.delete('prefetch') 
  },

3.拆包和组件重复使用打包，当文件的包越来越大的时候，我们需要进行相对应的分包处理，使用异步请求的办法来提升请求的速度。具体的方法如下，还是在webpack配置中

 chainWebpack: config => {
   
    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
   
          config
            .optimization.splitChunks({
   
              chunks: 'all',
              cacheGroups: {
   
                libs: {
   
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // only package third parties that are initially dependent
                },
                vantUI: {
   
                  name: 'chunk-vantUI',
                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /vant/ // in order to adapt to cnpm
                },
                commons: {
   
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true