webpack做项目优化
webpack优化 -- compression-webpack-plugin 开启gzip
打包的时候开启gzip可以大大减少体积,非常适合于上线部署。下面以vue-cli2.x项目为例,介绍如何在vue中开启gzip。(摘自网络:https://www.cnblogs.com/blogs-xlf/p/11365859.html)
步骤
安装 compression-webpack-plugin
注意,目前最新版需要运行在
webpack4.0
以上,如果你的webpack
是3.x版本的,请安装compression-webpack-plugin
的1.x版本(笔者安装的是1.1.12)。
npm install compression-webpack-plugin -D
改造vue项目配置
- 在
config/index.js
文件中修改productionGzip: true
;
- 在
build/webpack.prod.conf.js
文件中的plugins
添加下面的代码, vue-cli2.x默认已经写好了,则不用管
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
查看压缩前后的大小对比
如果想知道压缩前后的大小情况,可以使用
webpack-bundle-analyzer
插件,vue-cli2.x默认引进的不用管。然后在package.json
文件中添加下面的script命令:
"report":"npm run build --report=true"
另:
实际项目中的代码:
webpack 的externals配置
按照官方文档的解释,如果我们想引用一个库,但是又不想让webpack打包,并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用,那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的,但是也可以在我们项目开发中充分使用。
假设:以jquery为例子,目的是在runtime时通过cdn获取jquery依赖,在打包时忽略他的打包
步骤一:
//index.html
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>
步骤二:
//webpack.config.js
module.exports = {
//...
externals: {
jquery: 'jQuery'
//将需要忽略打包的都写在这个里面,但前提是index.html文件里面必须script引入
}
};
//属性名jquery指的是 import $ from 'jquery'中的 'jquery'
属性值 jQuery指的是jquery插件暴露出来的全局对象名。按理来说$应该也是可以写在属性值里面的,(也是jquery暴露的啊,但我没试过行不行)
步骤三:
文件中的
import $ from 'jquery';
千万不能去掉。 很重要,好多人就是把它去掉了跑过来问我为啥我的还是报错jquery is undefined。
vue项目:
webpack做项目优化的更多相关文章
- 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染
今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...
- vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大
从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...
- webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- vue-cli内部webpack的打包优化
在此之前,我们先谈谈前端项目的性能优化. 优化前端项目无非就是2方面的优化: 一.网络性能优化(重点) 减少请求数量(webpack的天职就是打包) 减少请求资源大小(压缩gzip,后端会完成) CD ...
- vue spn如何做seo优化
vue spn如何做seo优化 突然来了一个需求,对已有的项目做SEO优化,WHAT? 总所周知,spn对seo不够优化,因而官方考虑到直接使用ssr 一个不算解决办法的办法prerender-spa ...
- 新公司官网项目优化实践(Vue)
入职后接手website-html和website-mobile项目,发现项目加载速度不太理想,于是结合自己之前的经验对项目做了优化.此篇文章主要记录这次优化详情. 原始项目:开发环境:website ...
- 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化
github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...
- 82.使用vue后怎么针对搜索引擎做SEO优化?
什么是SEO 搜索引擎优化(Search engine optimization,简称SEO),指为了提升网页在搜索引擎自然搜索结果中(非商业性推广结果)的收录数量以及排序位置而做的优化行为,是为了从 ...
- 【C#】项目优化实战
[C#]项目优化实战 一. 数据库设计 1. 常量的枚举值直接存中文不要存数字(注意是常量,如果显示值可变就不能) 例如:男女,在数据库中不要存1和0,直接存男和女. 这样的好处:读取数据的时候可以避 ...
随机推荐
- Linux进程间通信之《共享内存》入门
目录 简述 代码 写端代码 读取端代码 编译 运行 简述 共享内存是Linux系统进程间通信常用的方式,通常用于数据量较大的情况,如果只是用于不同的进程间消息通知,那不如用消息队列或者socket.之 ...
- Python分析「我们为什么这么穷」
- Nginx - location常见配置指令,alias、root、proxy_pass
1.[alias]——别名配置,用于访问文件系统,在匹配到location配置的URL路径后,指向[alias]配置的路径.如: location /test/ { alias/first/secon ...
- axios的post请求返回状态码400
设置拦截 axios.interceptors.request.use((config) => { if (config.method === 'post') { if (!config.isF ...
- 用Java制作斗地主
首先,按照斗地主规则,完成洗牌发牌的动作.如图: 具体规则: 1. 组装54张扑克牌 2. 将54张牌顺序打乱 3. 三个玩家参与游戏,三人交替摸牌,每人17张牌,最后三张留作底牌. 4. 查看三人各 ...
- 2020-03-27:JDK1.8中在数据结构上,对HashMap做了什么样的改进?为什么?
福哥答案2020-04-04:头插改尾插,解决链表成环的问题.链表改成链表和红黑树.
- C#算法设计查找篇之04-斐波那契查找
斐波那契查找(Fibonacci Search) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/704 访问. 斐波那契 ...
- js对象的数据属性和访问器属性
js面向对象 ECMA-262第5版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征.ECMA-262定义这些特性是为了实现javascript引擎用的,因此 ...
- Vue中 props 这些知识点
如果你一直在阅读有关"props"内容,你会发现我们可能也一直在使用它们(即使没有意识到),但也许你并不完全确定它们是什么.或者如何正确使用它们,并充分利用它们. 当你读完这篇指南 ...
- Python 函数为什么会默认返回 None?
Python 有一项默认的做法,很多编程语言都没有--它的所有函数都会有一个返回值,不管你有没有写 return 语句. 本文出自"Python为什么"系列,在正式开始之前,我们就 ...