zoukankan      html  css  js  c++  java
  • 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业务代码

  • 相关阅读:
    c# gdi设置画刷透明
    char,varchar,nvarchar,text区别与联系
    banner无缝轮播【小封装】
    div中的内容垂直居中的五种方法
    jQuery hover() 方法
    年过三十,我为什么要学习ios 与安卓App 移动端技术
    CentOS 中用 Split 命令分割文件的方法
    centos E440 安装无线网卡
    CentOS7修改默认运行级别
    iwconfig: command not found 解决方案
  • 原文地址:https://www.cnblogs.com/xiaojingyuan/p/6840629.html
Copyright © 2011-2022 走看看