Vue-多页面应用实践

前言

之前做的一个项目，包括移动端和pc端页面，使用了vue-cli3搭建，Vue2.0进行开发 一开始项目是默认的单页面应用，移动端页面和pc端页面同个入口，打包在一起，导致app.js和chunk-vendors.js文件特别大，特别是移动端，所使用的资源只占了全部请求资源的一小部分，严重影响了性能。于是想到了将项目配置成多页面，移动端和PC端分开打包。

实践

首先，修改项目中的vue.config.js文件： 这一步可以参考文档方便理解cli.vuejs.org/zh/config/#…（vue-cli对webpack的多入口配置做了封装，所以在vue中，是使用pages来进行配置，与webpack稍有不同）

我的配置中backstage是后台管理页面（PC端），index是用户页面（移动端）

module.exports = {
    pages: {
        backstage: {
            //表示页面的入口
          entry: "./src/pages/backstage/main.js",
            //打包后存放的路径
          filename: "backstage/index.html",
            //页面模板
          template: "./public/backstage.html",
        },
        index: {
          entry: "./src/pages/foreground/main.js",
          filename: "index.html",
          template: "./public/index.html",
        },
  }
}

经过上面的配置后，入口文件就分开存放了

入口文件分开放了，那么怎么访问这两个页面呢？

只需要在访问路径前加上页面的名称就可以了，比如我要访问backstage：

localhost:8080/pathname/backstage#/ 就可以访问到后台的首页啦,其中pathname就是publiPath所配置的路径。

但是chunk-vendors文件特别大，是因为直接将node_modules文件夹下的所有PC端和移动端页面用到的模块全都打包了，需要优化一下，使chunk-vendors只打包两个页面都用到的模块,依旧是修改vue.config.js： 这一步可以参考：webpack.docschina.org/plugins/spl…

module.exports = {
    chainWebpack: (config) => {
    
   /* 
   ...一些其他配置
   */
    config.optimization.splitChunks({
      cacheGroups: {
        vendors: {
          name: "chunk-vendors",
          minChunks: 2,//被两个入口同时引用的第三方模块才进行打包
          test: /node_modules/,//打包第三方模块
          priority: -10, //在所有cacheGroups中的优先级
          /* 
            表示拆分哪些模块： 
            async: 只从异步加载的模块拆分，即import引入的代码。默认值
            initial: 表示只从入口模块进行拆分
            all: 表示以上两者都包括
          */
          chunks: "all",
        },
      },
    });
  },
    pages: {
    backstage: {
        //表示页面的入口
      entry: "./src/pages/backstage/main.js",
        //打包后存放的路径
      filename: "backstage/index.html",
        //页面模板
      template: "./public/backstage.html",
    },
    index: {
      entry: "./src/pages/foreground/main.js",
      filename: "index.html",
      template: "./public/index.html",
    },
  }
}

再次打包，发现chunk-vendors文件已经小了很多，因为只将两个页面都用到的第三方模块打包，剩下的都被个字打包进index.js和backstage.js中。

感觉spiltChunks是个好东西，但是对于上面的配置其实还有些云里雾里，所以还需要深入地了解一下splitChunks的用法。后面的文章再对splitChunks的学习进行记录