1、一个页面一个JS
源码结构
|—— src
|—— pageA 页面A的代码目录
|—— index.js 页面A的启动模块
|—— ...
|—— pageB 页面B的代码目录
|—— index.js 页面B的启动模块
|—— ...
|—— pageC 页面C的代码目录
|—— main1.js 页面C的启动模块1 例如:主功能
|—— main2.js 页面C的启动模块2 例如:实现访问统计的额外功能
|—— ...
|—— common 公共代码目录
|—— ...
webpack配置
module.exports = {
entry:{
pageA: "./src/pageA/index.js",
pageB: "./src/pageB/index.js",
pageC: ["./src/pageC/main1.js", "./src/pageC/main2.js"]
},
output:{
filename:"[name].[chunkhash:5].js"
}
}
这种方式适用于页面之间的功能差异巨大
、公共代码较少
的情况,这种情况下打包出来的最终代码不会有太多重复
打包出来的最终代码有太多重复会有什么问题,会导致传输量增加
。
问题:单独
开一个common chunk打包公共的模块
(A、B、C文件依赖
comon公共代码部分)?
因为打包出来的common文件没有暴露
任何内容,所以A文件没办法取到common里依赖的模块,所以公共代码,必须打包时放到a文件里
所以:如果是独立的公共功能,可以用一个chunk抽离出来
,单独打包; 如果是被依赖的公共功能,不能用chunk抽离出来
2、一个页面多个JS
源码结构
|—— src
|—— pageA 页面A的代码目录
|—— index.js 页面A的启动模块
|—— ...
|—— pageB 页面B的代码目录
|—— index.js 页面B的启动模块
|—— ...
|—— statistics 用于统计访问人数功能目录
|—— index.js 启动模块
|—— ...
|—— common 公共代码目录
|—— ...
webpack配置
module.exports = {
entry:{
pageA: "./src/pageA/index.js",
pageB: "./src/pageB/index.js",
statistics: "./src/statistics/index.js"
},
output:{
filename:"[name].[chunkhash:5].js"
}
}
这种方式适用于页面之间有一些独立、相同的功能
,专门使用一个chunk抽离这部分JS
有利于浏览器更好的缓存
这部分内容。
思考:为什么不使用
多启动模块
的方式?entry:{ pageA:["./src/pageA/index.js","./src/statistics/index.js], pageB: ["./src/pageB/index.js","./src/statistics/index.js] },
每个chunk
多个入口模块
,最后各种
打成一个文件,这样做可以,但是会有**增加传输量
的问题,浏览器没法缓存公共代码
**
3、单页应用
所谓单页应用,是指整个网站(或网站的某一个功能块)只有一个页面
,页面中的内容全部靠JS创建和控制。 vue和react都是实现单页应用的利器。
源码结构
|—— src
|—— subFunc 子功能目录
|—— ...
|—— subFunc 子功能目录
|—— ...
|—— common 公共代码目录
|—— ...
|—— index.js
webpack配置
module.exports = {
entry: "./src/index.js",
output:{
filename:"index.[hash:5].js"
}
}