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

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

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

第一步:

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. Intellij idea使用过程中遇到的一些问题

    问题:使用maven命令时,在报错信息里中文乱码,比如一些数据库配置报错什么的,是中文报错,设置里该设置为UTF-8的都设置了. 解决方法:idea.exe.vmoptions里增加-Dfile.en ...

  2. 未来-IOT-Aliyun:阿里云 IOT - 开发者社区

    ylbtech-未来-IOT-Aliyun:阿里云 IOT - 开发者社区 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. https://dev.iot. ...

  3. 图解python中赋值、浅拷贝、深拷贝的区别

    Python中,对象的赋值,拷贝(深/浅拷贝)之间是有差异的,如果使用的时候不注意,就可能产生意外的结果.下面本文就通过简单的例子介绍一下这些概念之间的差别. 对象赋值 直接看一段代码: will = ...

  4. WKWebView使用方法

    基本使用方法 WKWebView有两个delegate,WKUIDelegate 和 WKNavigationDelegate.WKNavigationDelegate主要处理一些跳转.加载处理操作, ...

  5. phpstorm 如何设置识别vue文件

    非常简单,步骤如下: 第一步: 设置->plugins->browser repositories 搜索vue.js,然后安装一下vue.js插件,重启ide. 第二步: Editor - ...

  6. 如何成功打造一款中台(PaaS)产品

    现如今,很多互联网公司在向“大中台,小前台”方向靠拢,通过打造高度可用.高度可定制的中台,来支撑前台业务的快速发展.个性化功能定制.但在构建中台产品(即所谓公司级平台)的时候,如何能成功让一款产品从0 ...

  7. Linux常用的命令以及配置

    cat /etc/group nobody:x:500:用户组 : 口令 : 用户组编号 #查看用户信息 stunnel4:x:118:123::/var/run/stunnel4:/usr/sbin ...

  8. 在做MVC和WebApi写返回数据时,可以这样定义

    public class Messages { /// <summary> /// 返回包含是否成功以及消息字符结果 /// </summary> /// <param ...

  9. webapi xml序列化删除<string xmlns="http://schemas.microsoft.com/2003/10/Serialization/">标签

    在WebApiConfig.Register中加入config.Formatters.Remove(config.Formatters.XmlFormatter); 移除默认的xml序列化器

  10. GNU C和C99标准中的可变参数宏(variadic macros)

    用可变参数宏(variadic macros)传递可变参数表你可能很熟悉在函数中使用可变参数表,如: void printf(const char* format, …); 直到最近,可变参数表还是只 ...