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文件的上面