优化vue打包chunk-vendors.js 过大

vue打包的时候chunk-vendors.js文件很大，导致首次加载页面比较慢；

首先：
1、安装compression-webpack-plugin

npm install --save-dev compression-webpack-plugin

安装的时候如果报以下的错误

版本的问题：

解决办法：npm install compression-webpack-plugin@6.1.1

2、修改vue的配置文件vue.config.js

const path = require('path');
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const zlib = require('zlib')
const isProduction = process.env.NODE_ENV === 'production'module.exports = {// 去除vue打包后js目录下生成的.map文件，用于加速生产环境构建productionSourceMap: false,publicPath: "./",// 解决打包体积大报的错configureWebpack: {resolve: {alias: {'@': path.resolve(__dirname, './src'),'@i': path.resolve(__dirname, './src/assets'),}},plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),// 下面两项配置才是 compression-webpack-plugin 压缩配置// 压缩成 .gz 文件new CompressionPlugin({filename: '[path][base].gz',algorithm: 'gzip',test: /\.js$|\.css$|\.html$/,threshold: 10240,minRatio: 0.8}),// 压缩成 .br 文件，如果 zlib 报错无法解决，可以注释这段使用代码，一般本地没问题，需要注意线上服务器会可能发生找不到 zlib 的情况。new CompressionPlugin({filename: '[path][base].br',algorithm: 'brotliCompress',test: /\.(js|css|html|svg)$/,compressionOptions: {params: {[zlib.constants.BROTLI_PARAM_QUALITY]: 11}},threshold: 10240,minRatio: 0.8})],optimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',maxInitialRequests: Infinity,minSize: 20000,cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name(module) {// get the name. E.g. node_modules/packageName/not/this/part.js// or node_modules/packageNameconst packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]// npm package names are URL-safe, but some servers don't like @ symbolsreturn `npm.${packageName.replace('@', '')}`}}}}}}
}

其次：
路由配置由原先的import更改为下面情况因为import会一次性全部加载完那样会影响很多

const heihei= resolve => require(['../views/heihei.vue'],resolve);
const one= resolve => require(['../views/one.vue'],resolve);

还有：
采用cdn加速

// 我这里引入了elementui  vue  echarts
<scriptcrossorigin="anonymous"integrity="sha512-RuUMLxuB8daxj+iqjuwA7u2lFFFQNlbnFnerb0FPhfZ761E0Wn6wD4f5vZskYgbxu+wSu36vfFHCUDaKaHHhUQ=="src="http://lib.baomitu.com/echarts/5.0.2/echarts.common.js"
></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 在引入 ElementUI 之前引入 Vue，会注入全局变量 Vue  -->
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<!-- 引入 ElementUI 组件库，会注入全局变量 -->
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>

在vue.config.js中配置

chainWebpack: config => {config.plugin('html').tap(args => {args[0].title = '医联体标化绩效管理平台'return args}),config.externals({'echarts': 'echarts','element-ui': 'ElementUI','vue': 'Vue',});
},

去除之前的引用

// import Vue from 'vue'
// 引入echarts
// import * as echarts from "echarts";
// Vue.prototype.$echarts = echarts
// 引入element组件
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'

优化vue打包chunk-vendors.js 过大相关推荐

vue打包生成的js文件过大优化
vue打包生成的js文件过大优化 1.组件按需加载 2.去掉生成map文件 3.cdn引入 4.路由懒加载 5.代码压缩 6.最后项目打包之后js文件太大问题问题描述 1.使用cdn引入不怎么改变 ...
vue打包后更改js文件名称
好好学习 ,天天向上.Are you ready? vue默认打包dist文件(js文件默认名称) vue打包后更改js文件名称例如: 中间部分加时间戳代码奉上修改vue.config.js c ...
解决vue打包后提示文件过大的警告
首先先列出我这个出现的三个警告第一个是css有问题第二个是js文件过大第三个是css文件过大解决 :针对第一个css的警告在我项目里用的element ui 出现这个警告是因为我vue组件里 ...
vue如何写原生js_纯技巧向：React, Vue, Rxjs 和原生 JS 代码大乱斗
前言这是一篇纯技巧向的文章,跟一年多之前的<揭秘Vue-3.0最具潜力的API>一样[0],更少的背景铺垫,更多的代码,更多的 demo,更快的节奏. 让我们直接进入主题. 背景前一阵 ...
vue打包时semver.js版本报错
如图,报错semver.js版本不正确,解决思路是在node_modules/semver.js内,忽略版本检查 ''' // if ANY of the sets match ALL of its ...
vue 打包优化，解决包大下载慢
如果你遇到vue打包后单个文件很大.网络传输严重影响了带宽.那你看这篇文章,应该是能帮到你的.本篇文章是实现文件Gz压缩实现.利用compression-webpack-plugin.具体看如下实现步 ...
webpack来打包你的vue项目，如发现你的vendor.js过大
1.如果你使用了webpack来打包你的vue项目,如发现你的vendor.js过大则可以参考本文的解决方案. 2.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了 ...
cdn加载vue很慢_Vue.js 项目打包优化实践
首先上结果: 把常用的 Vue,router,vuex,axios 的 runtime 包拆分了出来,改为 cdn: 另外就是对于自己编写的业务代码进行分包,根据路由进行懒加载,可以较好的提高首屏加载 ...
vue性能优化之build后包体积太大（1）
基于vue-cli3.0构建项目,npm引入多个第三方包.build之后,包体积太大导致首屏过长.----毫无体验感!!! 实践的项目喜欢捣鼓可以clone下来只总结了亲测效果明显的几种方案,解决方 ...

优化vue打包chunk-vendors.js 过大

优化vue打包chunk-vendors.js 过大相关推荐

最新文章

热门文章