场景:

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

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

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

所以我们利用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 三者的区别的更多相关文章

  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. MATLAB 到 Python之路1_数据结构和简单操作

    在numpy中,用array来代替matrix,不同于MATLAB中的万物皆matrix,这里的数据首先以array存在,然后通过操作才能和矩阵形式的array运算 1,array的形式 1.1 一维 ...

  2. 【liferay】5、使用PortletURL进行跨portlet通信 liferay6.2

    [问题] 1.当我们一个页面存在多一个portlet的时候,如在不同的portlet之间传参? [解决办法] 1.在liferay官方有几种方式,比较复杂麻烦,不是太实用,这里不再赘述. 2.通过fr ...

  3. Oracle VM VirtualBox启动后莫名奇妙的报错

    VirtualBox软件无法启动: 参考解决:http://blog.csdn.net/a_ssimi/article/details/52002939 修改兼容性:http://blog.csdn. ...

  4. JAVA框架之Spring【Spring事务详解】

    spring提供的事务管理可以分为两类:编程式的和声明式的.编程式的,比较灵活,但是代码量大,存在重复的代码比较多:声明式的比编程式的更灵活.编程式主要使用transactionTemplate.省略 ...

  5. Your Mac is infected with (3) Viruses!

    记一次流氓程序的清理 某天我的电脑不幸感染了这么一个病毒

  6. Android 开发工具类 34_OpenFileUtil

    匹配文件后缀名 MIME 类型. import java.io.File; import android.content.Context; import android.content.Intent; ...

  7. Node.js 安装及环境配置之 Windows 篇

    一.安装环境 1.本机系统:Windows 10 企业版(64位)2.Node.js:node-v8.9.4-x64.msi(64位) 二.安装Node.js步骤 1.下载对应自己系统对应的 Node ...

  8. 【转】获取到元素的 offsetLeft 、offsetTop属性不正常的解决方法。

    原地址:http://hi.baidu.com/huidust520/item/85da006981a6c635ad3e834e 我在工作中遇到个问题: 在ie7下和360浏览器下获取到的  offs ...

  9. 什么是编程语言,什么是Python解释器

    转自白月黑羽python在线教程:http://www.python3.vip/doc/blog/python/2018071401/ 0基础学Python之1:什么是编程语言,什么是Python解释 ...

  10. webkit技术内幕读书笔记 (一)

    本文部分摘录自互联网. Chromeium与Chrome Chromium是Google为发展自家的浏览器Google Chrome而打开的项目,所以Chromium相当于Google Chrome的 ...