Vue-多页面应用实践

·  阅读 600

前言

之前做的一个项目,包括移动端和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所配置的路径。

image.png

但是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中。

image.png

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改