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这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下, ...
随机推荐
- POJ 2681
#include<iostream> #include<stdio.h> #include<string> #include<algorithm> #d ...
- 阿里云centos7安装图形界面
CentOS 7 系统下,本文以 MATE 桌面环境安装进行安装配置说明: 登录服务器,执行如下指令安装桌面环境: # 先安装 MATE Desktop yum groups install & ...
- Strom的trident小例子
上代码: public class TridentFunc { /** * 类似于普通的bolt */ public static class MyFunction extends BaseFunct ...
- puppeteer(headless chrome)实现网站登录
puppeteer简介 puppeteer是Chrome团队开发的一个node库,可以通过api来控制浏览器的行为,比如点击,跳转,刷新,在控制台执行js脚本等等.有了这个神器,写个爬虫,自动签到,网 ...
- 01-SpringBoot项目:helloworld
1.Spring 官网:spring.io 2.继承SpringBoot的父项目 <parent> <groupId>org.springframework.boot</ ...
- 全网最详细的CentOS7里安装MySQL时出现No package mysql-server available错误的解决办法(图文详解)
不多说,直接上干货! 直接yum install mysql的话会报错,原因在于yum安装库里没有直接可以用的安装包,此时需要用到MariaDB了,MariaDB是MySQL社区开发的分支,也是一个增 ...
- Element ui tree树形控件获取父节点id
Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...
- 根据js来判断手机是操作系安卓还是ios
平常开发很常见的功能,在移动端需要根据javaScript来判断手机是安卓还是ios进行应用市场跳转. 通过js提供的Navigator可以来判断手机是安卓还是ios系统,代码如下 1.js判断是否为 ...
- Redis注意事项
1.Redis3.0没有虚拟内存概念,已从2.4就移除: 2.redis挂掉并重启时,如果有主从备份的,主机挂掉重启时先关掉主从备份,不然从机的数据会被冲洗掉 数据恢复时如果有 AOF(原理是将Rei ...
- MVC源码分析 - Action/Result 过滤器(续)
上一篇 看到了Action/Result过滤器的执行顺序: OnActionExecuting -> Action -> OnActionExecuted -> OnResultEx ...