test: /\.(js|css|html|svg)$/,compressionOptions: {params: {[zlib.constants.BROTLI_PARAM_QUALITY]: 11}},threshold: 10240,minRatio: 0.8})],// 开启分离 jsoptimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',maxInitialRequests: Infinity,minSize: 20000,cacheGroups: {vendor: {te...
3、优化打包chunk-vendor.js文件体积过大 当我们运行项目并且打包的时候,会发现chunk-vendors.js这个文件非常大,那是因为webpack将所有的依赖全都压缩到了这个文件里面,这时我们可以将其拆分,将所有的依赖都打包成单独的js。// 在vue-config.js 中加入...module.exports={...// 配置webpackconfigureWebpack:confi...
totalTime.png开始优化 ✈︎1、externals 提取项目依赖 从上面的打包分析页面中可以看到,chunk-vendors.js体积为2.21M,其中最大的几个文件都是一些公共依赖包,那么只要把这些依赖提取出来,就可以解决 chunk-vendors.js 过大的问题 可以使用externals来提取这些依赖包,告诉 webpack 这些依赖是外部环境提供的,在打包...
打出来的chunk-vendor.xxxx.js会包含element-ui和echarts和iview组件库,所以 js 体积会非常大 chunk-vendor.xxxx.js默认是所有node_modules下面的库集合 index 入口只是使用了 iview,由于需要加载chunk-vendor.xxxx.js,所以造成了不必要的加载 admin 入口 同上 会额外引入 iview 2. 我的预期效果 那么针对以上的问题...
minRatio:0.8}))}}}3、优化打包chunk-vendor.js文件体积过大 当我们运行项目并且打包的时候，会发现...
entries[fileName] = {entry:`src/pages/${fileName}/main.js`,// 模板来源template:`public/index.html`,// 在 dist/index.html 的输出filename:`${fileName}.html`,// 提取出来的通用 chunk 和 vendor chunk。chunks: ["chunk-vendors","chunk-common", fileName] ...
vue cli3 编译build后生成的chunk-vendors 还包含es6语法比如箭头函数等。vuex包值进行了压缩,promise等。 具体的业务代码可以将es6编译成为es5,可能是node_modules目录中没有被编译 尝试配置babel.config.js 总会出现报错。进行了vue.config.js 进行loader设置仍不起效 有人遇见过这种情况么?? 具体的babel.config....
{chunks:'all',maxInitialRequests:Infinity,minSize:300000,// 依赖包超过300000bit将被单独打包automaticNameDelimiter:'-',cacheGroups:{vendor:{test:/[\\/]node_modules[\\/]/,name(module){constpackageName=module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];return`chunk.$...
splitChunks: { cacheGroups: { // 把element-ui从chunk-vendor单独抽出来打包 'element...
3、优化打包chunk-vendor.js文件体积过大 当我们运行项目并且打包的时候,会发现chunk-vendors.js这个文件非常大,那是因为webpack将所有的依赖全都压缩到了这个文件里面,这时我们可以将其拆分,将所有的依赖都打包成单独的js。// 在vue-config.js 中加入...module.exports= { .....