webpack多入口优化
最近接手的项目是公司之前搭的多页面应用脚手架,然后到现在入口页面大大小小超过半百了,然后每次更新完配置之后,重启页面就贼拉卡,实在太影响开发效率了,于是开始优化呗。
最开始发现如果你想要让加载速度变快,可以暂时将不需要加载的页面注释掉一些,类似:
但是这种有问题,当你需要访问到其他页面上的数据的时候,就可能获取不到,所以这不是最佳的解决方案,因此采用方案二:
第一步: npm i html-webpack-plugin-for-multihtml --save-dev
然后再配置plugins:
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html',
// ...
multihtmlCache: true // 解决多页打包的关键!
})
]
webpack多入口优化的更多相关文章
- vue-cli内部webpack的打包优化
在此之前,我们先谈谈前端项目的性能优化. 优化前端项目无非就是2方面的优化: 一.网络性能优化(重点) 减少请求数量(webpack的天职就是打包) 减少请求资源大小(压缩gzip,后端会完成) CD ...
- 出大问题!webpack 多入口&&html模板在后端
新公司前后端不分离,后端用的是php的twig 我用webpack做多入口文件的打包,虽然成功了.但是引入js和css是在twig上写死的根据文件名. 一开始没问题,因为就定死了那么几个global. ...
- Webpack实战(三):作为前端你不得不懂的Webpack资源入口和出口的配置
关于Webpack前两篇跟大家分享的主要是Webpack的一些基本的配置,今天开始我们详细了解一下有关Webpack的各种配置,今天主要跟大家分享的是Webpack的资源入口和资源出口的配置. 如果想 ...
- webpack 打包性能优化
webpack 打包性能优化 开启多线程打包 thread-loader https://www.npmjs.com/package/thread-loader https://github.com/ ...
- webpack打包体积优化
优化: 1:外部引入模块(cdn) 如 jquery,zepto,d3, bootstrap这些固定的lib 使用cdn直接引用就可以,没有必要打包到build,有效利用302. 2:图标优化 ...
- webpack学习笔记—优化缓存、合并、懒加载等
除了前面的webpack基本配置,还可以进一步添加配置,优化合并文件,加快编译速度.下面是生产环境配置文件webpack.production.js,与wenbpack.config.js相比其不需要 ...
- 快速配置webpack多入口脚手架
背景 当我们基于vue开发单个项目时,我们会init一个vue-cli,但当我们想在其他项目里共用这套模板时,就需要重新init一个,或者clone过来,这非常不方便,而且当多人开发时,我们希望所有的 ...
- vue-cli3.x中的webpack配置,优化及多页面应用开发
官方文档 vue-cli3以下版本中,关于webpack的一些配置都在config目录文件中,可是vue-cli3以上版本中,没有了config目录,那该怎么配置webpack呢? 3.x初始化项目后 ...
- webpack 多入口配置
同事套搭建vue项目,个人推荐了VUE官网的vue-cil的方式,http://cn.vuejs.org/guide/application.html 顺着官网的操作,我们可以本地测试起我们的项目 n ...
随机推荐
- JumpServer 安装配置
环境 系统:Centos 7.4 阿里云ECS,单独绑定弹性公网IP 关闭selinux,防火墙对本机公司IP全开 #CentOS 7 $ setenforce 0 # 临时关闭,重启后失效 #修改字 ...
- 使用Navicat连接阿里云mysql报错10061
1.添加一个远程访问账号admin mysql> use mysql; mysql> GRANT ALL ON *.* TO 账户@'%' IDENTIFIED BY '密码' WITH ...
- [UE4]插值interp
插值 在两个数之间补充一些数,让过渡变得更自然. UE4引擎提供的插值 一.CInterp To:颜色(Color)插值.C:Color,颜色. 二.FInterp To.FInterp To Con ...
- log4j2 实际使用详解
转载至: https://blog.csdn.net/vbirdbest/article/details/71751835 如下是maven项目中的实例: 首先pom.xml中引入如下依赖,注意看都是 ...
- SpringBoot 配置文件 中文乱码
本方案,支持springboot 很简单 在配置文件中不写中文,写中文的ascll码 直接百度在线转ASCII,用工具 把中文转ASCII码==>\u628a\u4e2d\u6587\u8f6c ...
- docker-compose hello word
Compose 是 Docker 容器进行编排的工具, 是一个整合发布docker应用的利器,可定义和运行多容器的应用,在 Compose 中你可以使用 YAML 文件来配置你的应用服务.然后,只需要 ...
- 工作中拓展的加密解密传输方式. DES对称加密传输.
系统间通过xml传输, 不能采用明文, 就加密传输. 秘钥(真正有效的是前8位)存储于配置中. public static string EncryptStr(this string content, ...
- 海伦去约会——kNN算法
下午于屋中闲居,于是翻开<机器学习实战>一书看了看“k-邻近算法”的内容,并学习了一位很厉害的博主Jack Cui的代码,自己照着码了一遍.在此感谢博主Jack Cui的知识分享. 一.k ...
- scala中Either的一种使用场景
用scala有一年多了,对于scala中的Option和Try使用的较为频繁,对其应用场景相对熟悉一些.而对于Either,仔细回想一下却发现几乎(完全)没有使用过,其实并不是没有遇到过Either的 ...
- new words
Your cooperation is greatly appreciated 感谢您的合作! budget 预算