webpack中mainifest.js vendor.js app.js 三者的区别
场景:
大家在利用构建工具进行应用最后的打包过程中,我们希望做到的是将业务代码和第三方引用模块代码分开打包.
因为第三方引用模块代码通常很大,而且在不引入新的模块之前基本上是不会变动的。所以我们需要将这部分独
立打包,并利用浏览器的缓存去提高应用程序的首屏加载速度。
所以我们利用CommonsChunkPlugin插件去抽取这些第三方的部分作为vendor.js独立打包,因为需要利用到
缓存。所以我们添加hash值不能在未改变的情况下更新,否则独立打包vendor.js就没有意义了。
改变的原因:
webpack 打包后会在build过程中产生Runtime的部分(运行时的一部分代码)会被添加进入vendor.js中,这是根本原因
module.exports = {
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
]
...
}
解决方法和大家说的都差不多,主要就是将Runtime的部分code抽到manifest.js中,我这里就是说一下为什么这样做的原因
至于app.js 就是app.vue或者其它类似vue文件的js业务代码
webpack中mainifest.js vendor.js app.js 三者的区别的更多相关文章
- 33-Java中的String,StringBuilder,StringBuffer三者的区别
转载自:https://www.cnblogs.com/su-feng/p/6659064.html StringBuilder 详解 (String系列之2) Java中的String,String ...
- 小程序公用js提取到app.js中调用的实例
index.wxml: <view "> <text>{{page}}</text> </view> <view "> ...
- 小程序-调用公共js对象方法/ app.js
在小程序中,如果在子页面想调用共公js的方法,需先在子页面js中先实例化app:具体过程如下 子页面js: 1 2 3 4 5 6 7 8 //调用公共js对象以便调用其方法 var app = ge ...
- webpack 中导入 vue 和普通网页使用 vue 的区别(四)
一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...
- JS中的var、let、const三者的区别
ES5:var ES6:let.const ES5中的作用域有---全局作用域.函数作用域 ES6中新增了---块级作用域(块级作用域由{}包裹,if语句.for语句中的{}也属于块 ...
- webpack 3之hash、chunkhash和contenthash三者的区别
在使用webpack 3中,文件名的hash值可以有三种hash生成方式,那具体使用哪一种呢? 1.hash 如果都使用hash的话,所有文件的hash都是一样的,而且每次修改任何一个文件,所有文件名 ...
- Java中的String,StringBuilder,StringBuffer三者的区别
最近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下, ...
- Java中的String,StringBuilder,StringBuffer三者的区别(转载)
最近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下, ...
- 转:Java中的String,StringBuilder,StringBuffer三者的区别
最近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下, ...
随机推荐
- [Umbraco] Data Type之Render control
继续探讨Data Type.如果你创建过Data Type,你就会知道创建一个新的Data Type都需要指定一个Render control,这有点类似开始C#时用到的继承. 那么如何创建我们自己的 ...
- centos6 Linux安装redis 2.6.14
1.获取安装文件 wget http://download.redis.io/redis-stable.tar.gz 2.解压文件 tar xzvf redis-stable.tar.gz 3.进入目 ...
- Hibernate的执行流程和集合的映射关系
Hibernate的执行流程 集合映射 准被hibernate的运行环境 配置hibernate.cfg.xml主配置文件 1.Set集合 写User.java类 package com.gqx.co ...
- CentOS 7.3.1611编译安装Nginx1.10.3+MySQL5.7.16+PHP7.1.2
前传: 1.CentOS 7.3.1611系统安装配置图解教程 http://www.jb51.net/os/RedHat/597874.html 2.CentOS服务器初始化设置 http://ww ...
- 多线程,线程同步,synchronized关键字的用法
一.什么是多线程 Java多线程实现方式主要有四种:继承Thread类.实现Runnable接口.实现Callable接口通过FutureTask包装器来创建Thread线程.使用ExecutorSe ...
- Spark2.1.0模型设计与基本架构(上)
随着近十年互联网的迅猛发展,越来越多的人融入了互联网——利用搜索引擎查询词条或问题:社交圈子从现实搬到了Facebook.Twitter.微信等社交平台上:女孩子们现在少了逛街,多了在各大电商平台上的 ...
- 开源方案搭建可离线的精美矢量切片地图服务-5.Mapbox离线项目实现
项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵). 01:中国地图:http://test.sharegis.cn/mapbox/html/3china.ht ...
- SpringMVC之@PathVariable 映射 URL 绑定的占位符
@PathVariable 该注解可以将URL中占位符参数绑定到方法的参数上,及ULR中{xxx}可以通过@PathVariable("xxx")绑定到方法参数中. 测试类: @R ...
- KMP算法(——模板习题与总结)
KMP算法是一种改进的模式匹配算法,相比于朴素的模式匹配算法效率更高.下面讲解KMP算法的基本思想与实现. 先来看一下朴素模式匹配算法的基本思想与实现. 朴素模式匹配算法的基本思想是匹配过程中如果该位 ...
- AssemblyInfo.cs 详解
前言 ? .net工程(包括Web和WinForm)的Properties文件夹下自动生成一个名为AssemblyInfo.cs的文件,一般情况下我们很少直接改动该文件.但我们实际上通过另一个形式操作 ...