场景:

大家在利用构建工具进行应用最后的打包过程中,我们希望做到的是将业务代码和第三方引用模块代码分开打包.

因为第三方引用模块代码通常很大,而且在不引入新的模块之前基本上是不会变动的。所以我们需要将这部分独

立打包,并利用浏览器的缓存去提高应用程序的首屏加载速度。

所以我们利用CommonsChunkPlugin插件去抽取这些第三方的部分作为vendor.js独立打包,因为需要利用到

缓存。所以我们添加hash值不能在未改变的情况下更新,否则独立打包vendor.js就没有意义了。

改变的原因:

webpack 打包后会在build过程中产生Runtime的部分(运行时的一部分代码)会被添加进入vendor.js中,这是根本原因

  1. module.exports = {

      output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
      },

  1. plugins:[
  2. new webpack.optimize.CommonsChunkPlugin({
  3. names: ['vendor', 'manifest']
  4. }),
  5. ]
  6. ...
  7. }

解决方法和大家说的都差不多,主要就是将Runtime的部分code抽到manifest.js中,我这里就是说一下为什么这样做的原因

至于app.js 就是app.vue或者其它类似vue文件的js业务代码

webpack中mainifest.js vendor.js app.js 三者的区别的更多相关文章

  1. 33-Java中的String,StringBuilder,StringBuffer三者的区别

    转载自:https://www.cnblogs.com/su-feng/p/6659064.html StringBuilder 详解 (String系列之2) Java中的String,String ...

  2. 小程序公用js提取到app.js中调用的实例

    index.wxml: <view "> <text>{{page}}</text> </view> <view "> ...

  3. 小程序-调用公共js对象方法/ app.js

    在小程序中,如果在子页面想调用共公js的方法,需先在子页面js中先实例化app:具体过程如下 子页面js: 1 2 3 4 5 6 7 8 //调用公共js对象以便调用其方法 var app = ge ...

  4. webpack 中导入 vue 和普通网页使用 vue 的区别(四)

    一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...

  5. JS中的var、let、const三者的区别

    ES5:var          ES6:let.const ES5中的作用域有---全局作用域.函数作用域 ES6中新增了---块级作用域(块级作用域由{}包裹,if语句.for语句中的{}也属于块 ...

  6. webpack 3之hash、chunkhash和contenthash三者的区别

    在使用webpack 3中,文件名的hash值可以有三种hash生成方式,那具体使用哪一种呢? 1.hash 如果都使用hash的话,所有文件的hash都是一样的,而且每次修改任何一个文件,所有文件名 ...

  7. Java中的String,StringBuilder,StringBuffer三者的区别

    最近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下, ...

  8. Java中的String,StringBuilder,StringBuffer三者的区别(转载)

    最近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下, ...

  9. 转:Java中的String,StringBuilder,StringBuffer三者的区别

    最近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下, ...

随机推荐

  1. jq04--jq与ajax

    之前我们学习了一些有关jq函数的知识,现在我们看看jq与ajax方面的一些东西: 1.ajax(Asynchronous JavaScript and XML 异步的JavaScript与xml):  ...

  2. 在matlab中实现梯度下降法

    梯度下降法的原理,本文不再描述,请参阅其它资料. 梯度下降法函数function [k ender]=steepest(f,x,e),需要三个参数f.x和e,其中f为目标函数,x为初始点,e为终止误差 ...

  3. (转)explain、db2exfmt 命令的使用:文本输出执行计划

    原文:http://blog.51cto.com/freebile/1068610 db2有图形执行计划显示工具,如果没有图形环境,如unix主机,可以生成文本的文件来显示执行计划1.如果第一次执行, ...

  4. 单点登录--CAS认证--web.xml配置详解

    参考网址: https://blog.csdn.net/zhurhyme/article/details/29349543 https://blog.csdn.net/shzy1988/article ...

  5. JAVA框架之Hibernate【Hibernate缓存详解】

    1.缓存介绍 Hibernate中提供了两级Cache,第一级别的缓存是Session级别的缓存,它是属于事务范围的缓存.这一级别的缓存由hibernate管理的,一般情况下无需进行干预:第二级别的缓 ...

  6. ASP.NET MVC 与NLog的使用

    NLog是一个.NET 下一个完善的日志工具,个人已经在项目中使用很久,与ELMAH相比,可能EAMAH更侧重 APS.NET MVC 包括调试路由,性能等方面,而NLog则更简洁. github: ...

  7. 站在巨人肩上的.NET Core 2.1

    .NET Core 1.0自发布两年以来,得到了开发者群体相当高地认可. 下图来自Stack overflow survey 2018的统计: .NET Core已经成为前五的主流框架工具,现今借鉴了 ...

  8. UTF-8和GBK编码的区别

    UTF-8:对英文使用8位(一个字节).中文使用24位(三个字节)编码.对于英文字符比较多的网站一般用utf-8来编码以节省空间:包含全世界所有国家需要用到的字符,其编码的蚊子可以在各国各种支持utf ...

  9. java操作特殊字符需要注意的点

    在使用字符串替换,分离时 我们如果想替换一个字符串中的问号,我们就不能直接写问号,而要写[?] 实例如下 str = str.replaceAll("\""," ...

  10. Spring 3.1新特性之二:@Enable*注解的源码,spring源码分析之定时任务Scheduled注解

    分析SpringBoot的自动化配置原理的时候,可以观察下这些@Enable*注解的源码,可以发现所有的注解都有一个@Import注解.@Import注解是用来导入配置类的,这也就是说这些自动开启的实 ...