最近接手的项目是公司之前搭的多页面应用脚手架,然后到现在入口页面大大小小超过半百了,然后每次更新完配置之后,重启页面就贼拉卡,实在太影响开发效率了,于是开始优化呗。

最开始发现如果你想要让加载速度变快,可以暂时将不需要加载的页面注释掉一些,类似:

但是这种有问题,当你需要访问到其他页面上的数据的时候,就可能获取不到,所以这不是最佳的解决方案,因此采用方案二:

第一步:

npm i html-webpack-plugin-for-multihtml --save-dev
然后再配置plugins:
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html',
// ...
multihtmlCache: true // 解决多页打包的关键!
})
]

webpack多入口优化的更多相关文章

  1. vue-cli内部webpack的打包优化

    在此之前,我们先谈谈前端项目的性能优化. 优化前端项目无非就是2方面的优化: 一.网络性能优化(重点) 减少请求数量(webpack的天职就是打包) 减少请求资源大小(压缩gzip,后端会完成) CD ...

  2. 出大问题!webpack 多入口&&html模板在后端

    新公司前后端不分离,后端用的是php的twig 我用webpack做多入口文件的打包,虽然成功了.但是引入js和css是在twig上写死的根据文件名. 一开始没问题,因为就定死了那么几个global. ...

  3. Webpack实战(三):作为前端你不得不懂的Webpack资源入口和出口的配置

    关于Webpack前两篇跟大家分享的主要是Webpack的一些基本的配置,今天开始我们详细了解一下有关Webpack的各种配置,今天主要跟大家分享的是Webpack的资源入口和资源出口的配置. 如果想 ...

  4. webpack 打包性能优化

    webpack 打包性能优化 开启多线程打包 thread-loader https://www.npmjs.com/package/thread-loader https://github.com/ ...

  5. webpack打包体积优化

    优化: 1:外部引入模块(cdn)     如 jquery,zepto,d3, bootstrap这些固定的lib 使用cdn直接引用就可以,没有必要打包到build,有效利用302. 2:图标优化 ...

  6. webpack学习笔记—优化缓存、合并、懒加载等

    除了前面的webpack基本配置,还可以进一步添加配置,优化合并文件,加快编译速度.下面是生产环境配置文件webpack.production.js,与wenbpack.config.js相比其不需要 ...

  7. 快速配置webpack多入口脚手架

    背景 当我们基于vue开发单个项目时,我们会init一个vue-cli,但当我们想在其他项目里共用这套模板时,就需要重新init一个,或者clone过来,这非常不方便,而且当多人开发时,我们希望所有的 ...

  8. vue-cli3.x中的webpack配置,优化及多页面应用开发

    官方文档 vue-cli3以下版本中,关于webpack的一些配置都在config目录文件中,可是vue-cli3以上版本中,没有了config目录,那该怎么配置webpack呢? 3.x初始化项目后 ...

  9. webpack 多入口配置

    同事套搭建vue项目,个人推荐了VUE官网的vue-cil的方式,http://cn.vuejs.org/guide/application.html 顺着官网的操作,我们可以本地测试起我们的项目 n ...

随机推荐

  1. DB2锁与隔离级别

    数据库管理器支持三种一般类别的锁定: 共享(S) 挂起 S 锁定之后,并发应用程序进程只能对数据执行只读操作. 更新(U) 挂起 U 锁定之后,如果并发应用程序进程未声明它们要更新行,那么它们只能对数 ...

  2. dotnet core调试docker下生成的dump文件

    最近公司预生产环境.net core应用的docker容器经常出现内存暴涨现象,有时会突然吃掉几个G,触发监控预警,造成容器重启. 分析了各种可能原因,修复了可能发生的内存泄露,经测试本地正常,但是发 ...

  3. mvc开发中DTO,DO,FROM的区别

    DO:数据库实体类映射到model里的实体类,每个字段都和数据库相对应,一般来说开发的时候不要去添加或者修改里面的实体 DTO:与前台交互的时候(一般来说是查询操作)有一些数据字段是那一张表里面没有囊 ...

  4. Hexo NexT主题/cnblog等博客增加点击出现红心的特效

    查看效果 每日前端 我的博客 实现:1.下载这段js代码到项目目录 ===>下载地址2.在需要的地方添加js代码 <script type="text/javascript&qu ...

  5. Robot Framework 自动化框架大纲

    Python + Robot Framework 环境搭建 Android SDK + Appium 环境搭建 RobotFramework - AppiumLibrary 之元素定位 RobotFr ...

  6. Eclipse 上传 删除 下载 分析 hdfs 上的文件

    本篇讲解如何通过Eclipse 编写代码去操作分析hdfs 上的文件. 1.在eclipse 下新建Map/Reduce Project项目.如图:  项目建好后,会默认加载一系列相应的jar包. 下 ...

  7. scrapy-middlewares

    1.scrapy中间件 下载中间件Downloader Middlewares 下载器中间件处理请求与响应,对应两个方法 process_request(self, request, spider) ...

  8. OGG-01091 Unable to open file "./dirdat/cs001481" (error 2, No such file or directory)

    记一次ogg报错ogg-01091的处理过程 现场有一套RAC数据库的服务器异常重启,其中一个节点上部署了OGG,机器开机之后,发现OGG所有应用进程abended状态,查看日志,发现报错如下图: 分 ...

  9. 201772020113李清华《面向对象程序设计(java)》第十二周学习总结

    1.实验目的与要求 (1) 掌握Java GUI中框架创建及属性设置中常用类的API: (2) 掌握Java GUI中2D图形绘制常用类的API: (3) 了解Java GUI中2D图形中字体与颜色的 ...

  10. EMF32名词解释

    (EFM32)32位节能微控制器(Energy Friendly Microcontroller 32-bit) (Gecko)壁虎 (Starter Kit)入门套件 (STK)入门套件 (Debu ...