文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue多页面配置打包性能优化方式(解决加载包太大加载慢问题)

2023-01-14 12:00

关注

通常我们使用vue-cli开发多页面的时候,不知道您是否注意一个问题没有?

默认情况:webpack 会将多入口通用的组件库等,打包一个 vendor 的 chunk js 中

现在假设有两个页面:

入口 admin 使用到了element-ui组件库和echarts图表库,入口 index 使用了iview的组件库

一、问题描述及解决方案

1. 多入口存在的问题

那么这样就会存在问题:

2. 我的预期效果

那么针对以上的问题,我们预期应该是怎样的呢?

3. 可行方案

针对以上的需求,我探索出了一下两种方案:

二、方案一:打公共 chunks,单独分离各自的ui库

方案 1: 删除默认 splitChunk 配置,打公共 chunks,单独分离各自的 ui 库

删除默认 splitChunk 配置是了取消 webpack 的默认配置,因为 webpack 默认的配置是将node_modules下的所用到的库打包成一个chunk-vendor.xxxx.js。

主要分成三步:

详细配置如下:

let pages = {
  index: {
    entry: "src/main.js",
    template: "public/index.html",
    // 特别注意:由于各个入口单独分离了chunk之后,需要将对于的chunk名显示的列出
    chunks: [
      "index", //注意:这个是页面名称的chunk,下面的chunk名称需要对呀splitChunk对应的名称
      "chunk-vendors", //这是node_modules下的chunk
      "chunk-common", //这是admin和Index入口公用的chunk
      "chunk-iview" //index的单独chunk
    ]
  },
  admin: {
    entry: "src/admin.js",
    template: "public/admin.html",
    // 特别注意:由于各个入口单独分离了chunk之后,需要将对于的chunk名显示的列出
    chunks: [
      "admin", //注意:这个是页面名称的chunk,下面的chunk名称需要对呀splitChunk对应的名称
      "chunk-vendors", //这是node_modules下的chunk
      "chunk-common", //这是admin和Index入口公用的chunk
      "chunk-element-ui", //admin的单独chunk
      "chunk-echarts", //admin的单独chunk
      "zrender" //echarts用到了zrender
    ]
  }
};
module.exports = {
  pages,
  publicPath: process.env.BASE_URL,
  outputDir: "dist",
  assetsDir: "assets",
  runtimeCompiler: true,
  productionSourceMap: false,
  parallel: true,
  css: {
    // 是否提取css 生产环境可以配置为 true
    extract: true
  },
  chainWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      // 删除系统默认的splitChunk
      config.optimization.delete("splitChunks");
    }
  },
  configureWebpack: config => {
    // 给输出的js名称添加hash
    config.output.filename = "[name].[hash].js";
    config.output.chunkFilename = "[name].[hash].js";
 
    config.optimization = {
      splitChunks: {
        cacheGroups: {
          // 抽离所有入口的公用资源为一个chunk
          common: {
            name: "chunk-common",
            chunks: "initial",
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true,
            enforce: true
          },
          // 抽离node_modules下的库为一个chunk
          vendors: {
            name: "chunk-vendors",
            test: /[\\/]node_modules[\\/]/,
            chunks: "initial",
            priority: 2,
            reuseExistingChunk: true,
            enforce: true
          },
          // 由于Index入口使用了iview,所以讲iview单独处理出来,这样admin入口就不会使用此js
          iview: {
            name: "chunk-iview",
            test: /[\\/]node_modules[\\/]iview[\\/]/,
            chunks: "all",
            priority: 3,
            reuseExistingChunk: true,
            enforce: true
          },
          // 由于admin入口使用了element-ui,所以讲element-ui单独处理出来,这样index入口就不会使用此js
          element: {
            name: "chunk-element-ui",
            test: /[\\/]node_modules[\\/]element-ui[\\/]/,
                  //根据你实际的目录情况来决定 /[\\/]node_modules[\\/]_?element-ui(.*)/,
            chunks: "all",
            priority: 3,
            reuseExistingChunk: true,
            enforce: true
          },
          // 由于admin入口使用了echarts,所以讲echarts单独处理出来,这样index入口就不会使用此js
          echarts: {
            name: "chunk-echarts",
            test: /[\\/]node_modules[\\/](vue-)?echarts[\\/]/,
            chunks: "all",
            priority: 4,
            reuseExistingChunk: true,
            enforce: true
          },
          // 由于echarts使用了zrender库,那么需要将其抽离出来,这样就不会放在公共的chunk中
          zrender: {
            name: "zrender",
            test: /[\\/]node_modules[\\/]zrender[\\/]/,
            chunks: "all",
            priority: 3,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      }
    };
  }
};

三、方案二:删除默认splitChunk配置,抽离公共资源

其实告诉你,webpack如果是多入口的话,删除默认的 splitChunk 配置,多入口会单独各自打包,但是公共资源不会抽取。

针对以上的情况我们可以通过以下三步达到优化目的:

详细配置如下

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
let pages = {
  index: {
    entry: "src/main.js",
    template: "public/index.html",
    chunks: ["index", "chunk-common"] //分别是入口的名称,也就是前面的key值,和公共chunk的名称
  },
  admin: {
    entry: "src/admin.js",
    template: "public/admin.html",
    chunks: ["admin", "chunk-common"] //分别是入口的名称,也就是前面的key值,和公共chunk的名称
  }
};
module.exports = {
  pages,
  publicPath: process.env.BASE_URL,
  outputDir: "dist",
  assetsDir: "assets",
  runtimeCompiler: true,
  productionSourceMap: false,
  parallel: true,
  css: {
    // 是否提取css 生产环境可以配置为 true
    extract: true
  },
 
  chainWebpack: config => {
    // 删除默认的splitChunk
    config.optimization.delete("splitChunks");
  },
  configureWebpack: config => {
    // js output config
    config.output.filename = "[name].[hash].js";
    config.output.chunkFilename = "[name].[hash].js";
 
    config.optimization = {
      splitChunks: {
        cacheGroups: {
          common: {
            //抽取所有入口页面都需要的公共chunk
            name: "chunk-common",
            chunks: "initial",
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      }
    };
  }
};

四、方案对比

方案一: 删除默认 splitChunk 配置,打公共 chunks,单独分离各自的 ui 库(做减法)

优点:不需要处理公共 chunk,单独分离各自的 chunk 缺点:如果多入口使用的库比较多,需要各自单独的抽离

适用场景

适用于:多个入口页面耦合性比较强的(也就是多入口使用的公共资源比较多的),只有少量组件库不同

删除默认 splitChunk 配置,抽离公共资源(做加法)

优点:不需要单独分离各自的 chunk,只需要处理公共 chunk 即可 缺点:如果多入口公共库使用的比较多,抽离需要更加细致化

适用场景

适用于:多个入口页面耦合性比较低的(也就是多入口使用的公共资源比较少,通常是多个入口没有任何关系的)

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯