webpack性能优化-实战
题外话:年初项目重构上线,项目技术栈使用vue+webpack,测试执行整个打包流程需要10分钟,同时又因涉及三个渠道,部署好环境就需半个小时,这严重延误了上线进度,因此提高webpack构建效率,成为了改善团队开发效率的关机之一。
正文:
一.抽离项目配置文件
因为项目前后端分离,需要配置接口地址,当时没有考虑到分离配置文件,造成每次需要打包三次。
基本思路(百度):把配置信息挂在window下,然后写在一个不打包的js中,页面单独引入这个js
1.在dist/static/js/目录下,新建config.js,内容为:
window.g = {
serverUrl: 'http://localhost:8088/'
}
2.在*.html文件中引入该文件
<script type="text/javascript" src="/static/js/config.js"></script>
3.以上百度到的方法不是很适用项目。
原因:(1)项目为多页应用,几十个页面,手动添加script标签有些繁琐,也不利于更改.
(2)dist/目录为静态资源输出目录,为了提高维护性,最终决定把config.js文件放在/config下。
解决方法:
使用webpack插件add-asset-html-webpack-plugin,在html中注入script标签
//在项目根目录下/config/,新建config.js
var AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
......
plugins: [
new AddAssetHtmlPlugin([{
filepath: path.resolve(__dirname, '../config', 'config.js'),//文件本地地址
outputPath: utils.assetsPath('js'),//文件输出地址
publicPath: '/static/js/',//标签中引用的地址
includeSourcemap: false
}])
]
本来要用这个插件注入DllPlugin第三方依赖库的,但是因为实际操作中却没有明显提升打包效率,就用在分离配置文件了。
二.使用别名做重定向
三.优化loader配置
webpack性能优化-实战的更多相关文章
- 网站性能优化实战——从12.67s到1.06s的故事
文章摘自https://juejin.im/post/5b0b7d74518825158e173a0c 作为互联网项目,最重要的便是用户体验.在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接 ...
- webpack性能优化——DLL
Webpack性能优化的方式有很多种,本文之所以将 dll 单独讲解,是因为 dll 是一种最简单粗暴并且极其有效的优化方式. 在通常的打包过程中,你所引用的诸如:jquery.bootstrap.r ...
- 小程序Canvas性能优化实战
以下内容转载自totoro的文章<小程序Canvas性能优化实战!> 作者:totoro 链接:https://blog.totoroxiao.com/canvas-perf-mini/ ...
- Golang 性能优化实战
小结: 1. 性能查看工具 pprof,trace 及压测工具 wrk 或其他压测工具的使用要比较了解. 代码逻辑层面的走读非常重要,要尽量避免无效逻辑. 对于 golang 自身库存在缺陷的,可以寻 ...
- webpack 性能优化 dll 分包
webpack 性能优化 dll 分包 html-webpack-externals-plugin DLLPlugin https://www.webpackjs.com/configuration/ ...
- 我把阿里、腾讯、字节跳动、美团等Android性能优化实战整合成了一个PDF文档
安卓开发大军浩浩荡荡,经过近十年的发展,Android技术优化日异月新,如今Android 11.0 已经发布,Android系统性能也已经非常流畅,可以在体验上完全媲美iOS. 但是,到了各大厂商手 ...
- webpack 性能优化小结
背景 如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了gru ...
- Android UI性能优化实战, 识别View中的性能问题
出自:[张鸿洋的博客]来源:http://blog.csdn.net/lmj623565791/article/details/45556391 1.概述 2015年初google发布了Android ...
- Android UI性能优化实战 识别绘制中的性能问题
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45556391: 本文出自:[张鸿洋的博客] 1.概述 2015年初google ...
随机推荐
- python之旅:函数对象、函数嵌套、名称空间与作用域、装饰器
一 函数对象 一 函数是第一类对象,即函数可以当作数据传递 #1 可以被引用 #2 可以当作参数传递 #3 返回值可以是函数 #3 可以当作容器类型的元素 二 利用该特性,优雅的取代多分支的if de ...
- MySQL 第三篇:表操作
一 存储引擎介绍 存储引擎即表类型,mysql根据不同的表类型会有不同的处理机制 详见:http://www.cnblogs.com/moyand/p/9020698.html 二 表介绍 表相当于文 ...
- c++设计模式之抽象工厂模式
抽象工厂思想理解:可能有若干个你想生产的产品类,建立个工厂负责分别生产各类产品,由外部客户来选取想要那种产品类,此程序中没有delete,如想delete可在工厂类中的析构函数中实现(若有错请纠正)# ...
- Python【读写Json文件】
indent=10:缩进10个空格
- P3942 将军令
P3942 将军令 梦里,小 F 成了一个给将军送密信的信使. 现在,有两封关乎国家生死的密信需要送到前线大将军帐下,路途凶险,时间紧迫.小 F 不因为自己的祸福而避趋之,勇敢地承担了这个任务. 不过 ...
- Redis配置及使用
1.参考资料 在线命令说明: http://doc.redisfans.com/ redis安装列表: https://github.com/rgl/redis/downloads Redis工具使用 ...
- (转) linux下vim和bash配置文件
1.注释版 ~/.vimrc "去掉讨厌的有关vi一致性模式,避免以前版本的一些bug和局限 set nocompatible set autoread " 文件修改之后自动载入 ...
- Camera ISO、快门、光圈、曝光这几个概念
转载自知乎:https://www.zhihu.com/question/21427664 种田要知节气,开车要懂离合,任何一样手艺都有行话.虽然我觉得尽量从实际问题说起,尽量不要说的很专业,但有几个 ...
- warshall-floyd算法:POJ No 2139 Six Degress of Cowvin Bacon(任意两点最短路径))
题目: http://poj.org/problem?id=2139 题解:N只牛,在一组的两只牛,分别两只之间为 “1度”,自己到自己为0度,M组牛.求,N只牛之中,两只牛之间 平均最短度数*100 ...
- Linux安装python模块
# 依赖解决 # yum -y install epel-release python-devel gcc # 安装模块 # pip install psutil (若没有pip命令,可通过 yum ...