webpack提取公共模块-CommonsChunkPlugin

CommonsChunkPlugin官方文档解释：

CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。

而在实际项目中，本人是这样的应用的，项目结构如下图：
这里写图片描述

其中的index和login用到了 m1.js,m2.js的方法，代码如下：

import {xiaoyu} from '../m1.js'
import {dayu} from '../m2.js'

在webpack.config.js是这么配置的：

entry:{
    'index':['./src/page/index/index.js'],
    'login':['./src/page/login/index.js']
  },
 output:{
    path:path.resolve(__dirname, 'dist'),
    filename:'js/[name].js'
  },

所以最后打包，会在./dist/下面分别打包出index.js和login.js，看了一下打包后的文件。
毫无意外，这两个文件里面都打包了 m1.js,m2.js的方法，
其实完全可以把 m1.js,m2.js单独提取出来合成一个文件引入到需要的页面上去，这样就不用重复的打包了，这个时候就用到CommonsChunkPlugin这个插件

在webpack.config.js配置如下

plugins:[
    new webpack.optimize.CommonsChunkPlugin({
      name : 'common',
      filename : 'js/base.js'
    })
  ]

加入后再重新打包

会发现 dist下面的js文件夹下面会多出一个base.js的打包文件，里面就是把 m1.js,m2.js单独拿了出来重新打包成了一个文件，大大的节省了空间
只需要在主文件下面引入base.js就可以了

还有一个问题就是

m1.js,m2.js是我分别在用到的时候 import引入进来的，如果有一个文件存放的就是共用方法，那我难道要把这个文件import引入到所有的文件里面去吗？
这个问题CommonsChunkPlugin也是能解决的：

首先需求如下图

这里写图片描述

在common下面的文件是我的公用方法，那么我可以把common下的方法一同打包到base.js，这样就直接一个文件全局引用了

webpack.config.js配置如下

entry:{//首先在入口引入公共文件，取名'common'
    'commom':['./src/page/common/index.js']
    'index':['./src/page/index/index.js'],
    'login':['./src/page/login/index.js']
  },
  output:{
    path:path.resolve(__dirname, 'dist'),
    filename:'js/[name].js'
  },
  plugins:[
    new webpack.optimize.CommonsChunkPlugin({
      name : 'common',//这里的'common'回去找上面入口处引入的common
      filename : 'js/base.js'
    })
  ]

最后，在这里记录一个使用CommonsChunkPlugin时的坑
打包时报错webpackJsonp is not defined
其实就是你打包的公共模块 base.js并没有引用，引用时必须放在打包的其他的js文件的上面

webpack提取公共模块-CommonsChunkPlugin

猜你喜欢