vue 打包后app.css,verondor.js文件过大
参考:https://blog.csdn.net/feiyu_may/article/details/80987404
https://blog.csdn.net/qq_41999617/article/details/88052534
https://blog.csdn.net/u013788943/article/details/79786558
https://blog.csdn.net/weixin_33860737/article/details/91461972
1. 查看各部分文件大小及编译后文件大小
(1) 使用webpack-bundle-analyzer工具,先安装依赖包
npm install cross-env --save-dev
(2) 然后在package.json的scripts中添加
"analyze":"cross-env NODE_ENV=production npm_config_report=true npm run build"
如下
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build"
}
(3) 执行npm run analyze,就会在浏览器自动打开一个页面显示文件信息。如下图
每一块是一个编译文件及其所编译的源文件内容,最上方的文件是编译完成的文件,下面的其他文件就是此编译文件所编译的源文件,色块的大小代表文件大小,这样我们可以很直观地看出哪些文件比较大。
2. 几种压缩文件的方式。
(1)、vue-router懒加载
export default new Router({
routes: [{
path: '/',
name: 'Home',
meta: {
index: 0,
keepAlive: true,
title: '首页'
},
component: resolve => require(['../components/Home'], resolve) //关键
},
{
path: '/mine',
name: 'Mine',
meta: {
index: 1,
keepAlive: false,
title: '个人中心'
},
component: resolve => require(['../components/Mine'], resolve)
}]
(2)、工程文件打包的时候不生成.map文件
npm run build编译之后,我们查看编译生成的文件,发现有很多.map文件,这些文件也占了不小的空间。.map文件的作用是帮助编译后的代码调试,但是我们上线的代码已经调试完成,所以上线时可以不生成.map文件。
在config/index.js中将productionSourceMap的值修改为false
(3)、gzip压缩
安装插件
npm install --save-dev compression-webpack-plugin
在config的index.js文件找到productionGzip,将属性值false改为true。
要使用这一方式,需要服务器端的支持。以tomcat为例
找到tomcat的server.xml文件,找到其中Connector节点然后进行配置修改,具体配置如下
<Connector port="80"protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" maxPostSize="0" useBodyEncodingForURI="true" compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata"compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/jpeg,application/json"/>
参数说明:
- compression="on" 打开压缩功能
- compressionMinSize="2048" 启用压缩的输出内容大小,当被压缩对象的大小>=该值时才会被压缩,这里面默认为2KB
- noCompressionUserAgents="gozilla, traviata" 对于以下的浏览器,不启用压缩
- compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" 压缩类型
之后刷新页面( 注意禁用缓存 ),观察 js、css 等资源文件的请求中是否包含 Content-Encoding: gzip
,如果存在,则表明 gzip 已成功。
(4)、CDN
在项目开发中,我们会用到很多第三方库,如果可以按需引入,我们可以只引入自己需要的组件,来减少所占空间,但也会有一些不能按需引入,我们可以采用CDN外部加载,在index.html中从CDN引入组件,去掉其他页面的组件import,修改webpack.base.config.js,在externals中加入该组件,这是为了避免编译时找不到组件报错。
index.html中
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui@2.3.7/lib/index.js"></script>
webpack.base.config.js中
entry: {
app: './src/main.js'
},
externals: { //关键
'vue': 'Vue',
'vue-router': 'VueRouter',
// 'vuex': 'Vuex',
'axios': 'axios',
'element-ui': 'ELEMENT'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
vue 打包后app.css,verondor.js文件过大的更多相关文章
- vue工程化之公有CSS、JS文件
1.关于公共的css 在src下面新建public.css,然后在main.js中引入进来 import '@/public.css',这样所有页面中都会使用这个样式了,如果只是部分页面需要,那还是不 ...
- 解决使用vue打包时vendor文件过大或者是app.js文件很大的问题
这篇文章主要介绍了使用vue打包时vendor文件过大或者是app.js文件很大问题的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 第一次使用vue2.0开发,之前都是用的angu ...
- vue打包后js和css、图片不显示,引用的字体找不到问题
vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...
- vue打包后空白页问题全记录 (background路径,css js404,jsonp等);
总结一下vue打包后问题全记录:大部分开发者webpack基本上都是拿来就用的(并没有系统化的研究). 一 >>> 打包之后的静态文件不能直接访问:(例如dist)打包后搭个服务器才 ...
- asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度
介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中 ...
- Vue打包后出现一些map文件
Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行 cnpm run build 开始 ...
- webpack打包时排除其中一个css、js文件,或单独打包一个css、js文件
在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单 ...
- vue打包后出现一些map文件的解决方法
Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1.运行 cnpm run build 开始 ...
- 解决修改css或js文件后,浏览器缓存未更新问题
问题描述:最近在上线新版本项目的时候,发现有的用户的操作还是调用的老版本JS里面的内容,这样就造成原来新的JS里面加上的限制不能限制用户的操作,从而导致用户可以重复操作. 问题产生原因: 如果在用户之 ...
随机推荐
- yii2使用vendor文件夹下的的css文件
yii2 使用 vendor 下在css样式, 可以新建一个Asset,定义 public $sourcePath="@vendor/..",如:public $sourcePat ...
- css样式初始化代码总结
编写css样式之前需要初始化css样式,总结如下: /* CSS Document */ html, body, div, span, object, iframe,h1, h2, h3, h4, h ...
- leetcood学习笔记-3-无重复字符的最长子串
题目描述: 方法一:O(N) class Solution: def lengthOfLongestSubstring(self, s: str) -> int: slow = 0 fast = ...
- [JZOJ6279] 2019.8.5【NOIP提高组A】优美序列
题目 题目大意 给你一个排列以及若干区间,对于每个区间,问包含它的最小的优美序列的区间. 所谓优美序列,即将权值排序后能够得到连续的排列. 思考历程 优美序列显然满足这个条件:\(mx-mn=r-l\ ...
- 阿里云发布新版SaaS上云工具包,全面助力SaaS上云
9月26日,在云栖大会SaaS加速器专场上,阿里云发布了新版的SaaS上云工具包(SaaS Launch Kit),发布了API网关的新功能,以及推出了全新升级的能力中心. SaaS上云工具包,顾名思 ...
- 最大流任务调度——hdu3572二分图建图
很简单的任务调度模板题 把一个工作完成一天的量当做是边 /* 任务调度问题最大流 因为两个任务之间是没有关系的,两天之间也是没有关系的 所以抽象成二分图 任务i在天数[si,ei]之间都连一条双向边, ...
- Java集合综述
Java集合图,虚线框为接口,实线框是具体的类 具体实现类 基本使用 (1)List: List基本操作 ArrayList<String> arrayList = new ArrayLi ...
- CSS3视口单位vw,wh
vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应 ...
- tomcat JAVA_OPTS设置
原文地址:https://blog.csdn.net/bamboo_cqh/article/details/72820700 AVA_OPTS ,顾名思义,是用来设置JVM相关运行参数的变量. JVM ...
- JS 基本的介绍
JS中的注释 HTML的注释:<!—注释内容--> CSS注释:/* 注释 */ JavaScript的注释:// 或 /* 多行注释 */ 变量 1.变量的概念 变量是变化 ...