首页 > 其他分享 >uniapp vue.config.js配置chunk-vendors.js文件拆分

uniapp vue.config.js配置chunk-vendors.js文件拆分

时间:2023-06-14 21:11:21浏览次数:40  
标签:uniapp vue return chunk js chunkName chunks false

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir);
}
const CompressionPlugin = require('compression-webpack-plugin')
const htmlWebpackPlugin = require('html-webpack-plugin')
htmlWebpackPlugin.prototype.filterChunks = (chunks, includedChunks, excludedChunks) => {
  return chunks.filter(chunk => {
    let chunkName = chunk.names[0];
    // This chunk doesn't have a name. This script can't handled it.
    if (chunkName === undefined) {
      return false;
    }
    let idx = chunkName.indexOf('~')
    if (idx > -1) {
      chunkName = chunkName.substr(0, idx)
    }
    console.log('Chunks ', chunkName);
    // Skip if the chunk should be lazy loaded
    if (typeof chunk.isInitial === 'function') {
      if (!chunk.isInitial()) {
        return false;
      }
    } else if (!chunk.initial) {
      return false;
    }
    // Skip if the chunks should be filtered and the given chunk was not added explicity
    if (Array.isArray(includedChunks) && includedChunks.indexOf(chunkName) === -1) {
      return false;
    }
    // Skip if the chunks should be filtered and the given chunk was excluded explicity
    if (Array.isArray(excludedChunks) && excludedChunks.indexOf(chunkName) !== -1) {
      return false;
    }
    // Add otherwise
    return true;
  });
}
module.exports = {
  configureWebpack: {
    plugins: [
        new CompressionPlugin({
            algorithm: 'gzip', // 使用gzip压缩
            test: /\.js$|\.css$|\.html$|\.flag$/, // 匹配文件名
            filename: '[path][base].gz', // 压缩后的文件名(保持原文件名,后缀加.gz)
            minRatio: 0.8, // 压缩率小于0.8才会压缩
            threshold: 10240, // 对超过10k的数据压缩
            deleteOriginalAssets: false // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件)
          })
    ],
    output: {
      filename: 'static/js/[name].js?hash=[hash:8].flag',
      chunkFilename: 'static/js/[name].js?hash=[hash:8].flag'
    },
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 400000,
        chunks: 'all',
        name: true,
        cacheGroups: {
          vendors: {//key 为entry中定义的 入口名称
            test: /[\\/]node_modules[\\/]/,
            priority: -10//优先级
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true//复用之前的打包模块
          }
        }
      }
    }
  }
}

  

标签:uniapp,vue,return,chunk,js,chunkName,chunks,false
From: https://www.cnblogs.com/week-1/p/17481354.html

相关文章

  • 【JS错题总结】作用域链问题
    作用域链上面代码的输出是GoodbyeJack,因为执行到语句typeofname==='undefined' 的时候,函数会从内向外(作用域链)寻找该变量,从语句var name;找到该变量的定义,该变量此时的值为undefined。自执行函数解析和执行一起完成,自己有的不会再向上查找。varname='zhangsan'......
  • 【JS错题总结】node中的微任务
    答案是n1n2p1p2 原因:node中的微任务包含两部分:1.process.nextTick()注册的回调(nextTicktaskqueue)2.promise.then()注册的回调(promise taskqueue) node在执行微任务时,会优先执行nextTicktaskqueue中的任务,执行完之后接着执行promisetaskqueue......
  • vue整合axios
    一、整合axios(底层支持ES6新的对象:Promise)①安装axios参照官网:http://axios-js.com/docs/index.html直接安装(不指定版本的话),会安装最新的版本,最新的axios版本只支持vue3,所以要指定axios的vue2的版本npminstall--saveaxios@0vue-axios@2②配置main.jsok③确认a......
  • SQL中json解析技巧
    比如字段var1,值是'{"a":{"b":{"c":1,"d":2}}}'大家都知道用get_json_object(var1,'$.a')可以得到'{"b":{"c":1,"d":2}}',如果要继续下挖,不需要get_json_object函数一直套可以直接按这个写法:get_json_object......
  • vue+ elementUI
    1、在dos窗口下运行命令npmielement-ui-S安装elementui2、配置elementui3、画面代码展示登录页面<template><div><!--:是v-bind的简写--><el-formref="loginForm":model="form":rules="rules"label-width="80px&q......
  • js把string转化为json
    //声明变量名为a的对象vara={a:1,b:2,c:"wangwei"};//将JSON对象转化为JSON字符,赋值给变量letstrResult=JSON.stringify(a)//查看变量strResult是什么类型typeofstrResult//'string'//JSON.parse()用于从一个字符串中解析出json对象letjsonResult=JSON.parse(str......
  • JS排序:插入排序 冒泡排序 选择排序
    1.插入排序 1letarr=[30,5,7,60,22,18,29]2letfn=arr=>{3for(letj=1;j<arr.length;j++){4letcurrent=arr[j]5letpreIdx=j-16while(preIdx>=0&&arr[preIdx]>......
  • JS中, Set为什么是带键的集合?
    起因这两天写了个LRUCache,用到了Set做AllowList,来判断API是否应该被缓存.查MDN时,发现Set被归类在KeyedCollection中.下意识中,总认为Set属于Array的一类,应该是IndexedCollection.感觉奇怪,所以多查了查文档过程首先,看了下MDN的文档、ECMA的文档.都没有明确......
  • 记录--极致舒适的Vue可编辑表格
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助使用ElementPlus的Table啥都好,就是没有可编辑表格!!!......
  • vue+css: 引用的组件快速改变滚动条样式
    在a组件页面内有b组件,b组件产生的滚动条太丑不好看但是又不想改变b组件(b组件公共用的地方很多)又不想专门复制份在此基础上改。只要在使用的组件上增加css代码即可同时让组件内滚动条生效,原理是因为此滚动条相当于未定义类的当前组件全局。所以可以直接使用并生效comp.vue<styl......