代码分片
按需加载
- 代码分片与公共模块提取
- CommonsChunkPlugin 与 SplitChunksPlugin
- 资源异步加载原理
代码通过入口划分代码
这种方式通过手工配置，会变得十分复杂，推荐使用CommonsChunkPlugin 与 SplitChunksPlugin
entry: {
app: './app.js',
lib: ['lib-a', 'lib-b', 'lib-c']
}
// index.html
<script src="dist/lib.js">
<script src="dist/app.js">
CommonsChunkPlugin 4.0以下内部自带的插件
主要用于提取多入口之间的公共模块
假设有两个文件都引入了react
const webpack = require('webpack')
module.exports = {
entry: {
foo: './foo.js',
bar: './bar.js'
},
output: {
filename: '[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'commons', // 指定公共chunk的名字
filename: 'commons.js' // 提取后的资源文件名
})
]
}
这样就把react及其依赖的模块都提取到commons.js了，
记得页面引用的时候要加入script标签引入commons.js
提取vendor
单入口也可使用CommonsChunkPlugin提取公共模块
const webpack = require('webpack')
module.exports = {
entry: {
app: './app.js',
vendor: ['react'] // 把react变为app和vendor共有的模块
},
output: {
filanme: '[name].js',
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js' // 覆盖entry.vendor所产生的资源
})
]
}
}
// app.js
import React from 'react'
document.write('app.js, React.version)
设置提取范围
chunks 可以规定从哪些入口中提取公共模块
const webpack = require('webpack')
module.exports = {
entry: {
a: './a.js',
b: './b.js',
c: './c.js'
},
output: {
filename: '[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'commons',
filename: 'commons.js',
chunks: ['a', 'b'] // 只会从a.js b.js中提取公共模块
})
]
}
设置提取规则
默认规则是：只要一个模块被两个入口 chunk所使用就会被提取出来，比如a和b用了react,react就会被提取出来
一些组件或工具模块，虽然被多次引用，但可能经常修改，这样不宜和react这样的库放在一起
minChunks设置提取规则
- 数字
minChunks: n 只有该模块被n个入口同时引用才会进行提取 - Infinity 无穷，提取的阀值无限高
所有模块都不会被提取 - 函数
webpack打包过程中的每个模块都会经过这个函数处理，当函数返回true时才会提取
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js',
minChunks: function (module, count) {
// module.content 模块目录路径
if (module.content && module.content.includes('node_modules)) {
return true
}
// module.resource 包含模块的完整路径
if (modle.resource && module.resource.endsWith('util.js')) {
return true
}
// count 为模块被引用的次数
if (count > 5) {
return true
}
}
})
可以分别提取出node_modules目录下的模块，util.js的模块，以及被引用5次以上的模块
optimization.SplitChunks 4.0以上
改进CommonsChunkPlugin
默认提取条件：
- 提取后的chunk共享或来自node_modules
- js chunk 大于30kb css chunk 大于50kb
- 在按需加载过程中，并行请求的资源最大值<=5 按需加载指通过动态插入script标签的方式加载脚本
- 在首次加载时，并行请求的资源数最大值<=3
// webpack.config.js
module.exports = {
entry: './foo.js',
output: {
filename: 'foo.js',
publicPath: '/dist'
},
mode: 'development', // webpack4新增的配置项
optimization: {
splitChunks: {
chunks: 'all' // 会对所有的chunks生效，默认只对异步chunks生效
}
}
}
// 异步的例子
//foo.js
import React from 'react'
import ('./bar.js')
document.write('foo.js', React.version)
// bar.js
import React from 'react'
console.log('bar.js', React.version)
chunks: async(默认), initial(只对入口chunk生效), all(两种模式同时开启)
资源异步加载
import()
与正常es6import语法不同，impot函数加载的模块及其依赖会被异步进行加载并返回一个Promise对象
正常模块的加载:
// foo.js
import { add } from './bar.js'
console.log(add(2, 4))
// bar.js
export function add(a, b) {
return a + b
}
假设bar.js资源体积很大，并且页面初始化并不需要它，可以对它进行异步加载
//foo.js
import ('./bar.js').then({ add } => {
console.log(add(2, 3))
})
// bar.js
export function add(a, b) {
return a + b
}
// 还要改一下webpack配置
module.exports = {
entry: {
foo: './foo.js'
},
output: {
publicPath: './dist/',
filename: '[name].js',
chunkFilename: '[name].js' // 指定异步chunk的文件名
},
mode: 'development',
devServer: {
publicPath: '/dist/',
port: 3000
}
}
首屏加载的js资源是通过页面中的script来指定的，而间接资源是通过首屏js再进一步加载的js
import ('./bar.js') 成了一个间接资源，需要配置output.publicPath告诉webpack去哪里获取它
这种异步加载的方式经常在用户切换路由到某些特定路由时去渲染相应组件，这样分离之后首屏加载的资源会小很多
output.publicPath, 这边有一个注意的点，即路径写成 ./dist 相对路径。如果写成/dist/这种绝对路径，
有一个弊端是当nginx把前端的包没有放在根目录的情况下，index.html会访问资源失败。因此推荐写成相对路径，
但是当使用相对路径时，有会存在一个潜在的问题，即项目本身的路由访问如果是HTML5模式，而不是使用hash时（路由上有一个#号），
那么项目一样会部署失败。angular，react都会有这样的问题，vue没用过，应该类似。此时的解决办法是，
在index.html的head中添加base标签，即：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<base href="/">
</head>
网友评论