打包命令
- 为了development模式下也能很好观察打包的文件，我们在package.json中增加一个打包命令，不使用devServer
"scripts": {
"dev": "webpack --config ./config/webpack.dev.js",
"start": "webpack-dev-server --config ./config/webpack.dev.js",
"build": "webpack --config ./config/webpack.prod.js"
}
index.js引入lodash
- 安装lodash
npm install lodash -D
- index.js使用lodash
import _ from 'lodash'
console.log(_.join(['a','b','c'],'***'))
- 打包后生成的文件很大
- 打包文件会很大，加载时间会很长，改了业务代码，重新访问我们的页面，又要重新加载这么大的文件内容
写代码时的代码分割
- 新建一个lodash.js文件
// 导入import 文件，并且将lodash挂载到window对象上
import _ from 'lodash'
window._ = _
- 修改index.js
// 不需要import lodash，可直接使用_
console.log(_.join(['a','b','c'],'***'))
- 修改webpack.common.js
// 打包的入口文件改为两个，单独打包lodash
entry: {
lodash: './src/lodash.js',
main: './src/index.js',
},
- main.js被拆成loadash.js 和 mian.js(业务代码)，浏览器并行加载两个文件，当业务代码发生变化，用户不需加载lodash，只需加载main.js
利用webpack实现代码分割
- 不需要开发者自己再写个lodash.js将lodash挂载到window，而是自动把类库拆分成一个文件
- 修改index.js
// 导入lodash
import _ from 'lodash'
console.log(_.join(['a','b','c'],'***'))
- 修改webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: {
// 打包index.js文件
main: './src/index.js',
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
},{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
},{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin({
root: path.resolve(__dirname, '../')
}),
],
output: {
path: path.resolve(__dirname, '../build'),
filename: '[name].js'
},
optimization: {
// 设置splitChunks
splitChunks: {
chunks: "all"
}
}
}
- 打包后index.js会自动变为两个文件，实现了自动的代码分割
异步import的代码分割
- 异步import需要引入官方的babel
npm install @babel/plugin-syntax-dynamic-import -D
- 修改babelrc
{
"presets": [
[
"@babel/preset-env",{
"targets": {
"chrome": "67"
},
"useBuiltIns": "usage"
}
],
"@babel/preset-react"
],
// 使用异步 import 插件
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
- 修改index.js为异步import方式
function getComponent() {
return import('lodash').then(({ default: _ }) => {
var element = document.createElement('div')
element.innerHTML =_.join(['a','b','c'],'***')
return element
})
}
getComponent().then(element => document.body.appendChild(element))
- 打包index.js会拆分成两个文件
- 打开index.html
- 可以指定生成的chunk文件的文件名
function getComponent() {
// 通过这种注解生成chunkname，将生成的chunk文件指定文件名为lodash
return import(/* webpackChunkName:'lodash' */'lodash').then(( _ ) => {
var element = document.createElement('div')
element.innerHTML =_.join(['a','b','c'],'***')
return element
})
}
getComponent().then(element => document.body.appendChild(element))
splitChunks配置项
- 修改
webpack.common.js
optimization: {
splitChunks: {
chunks: "all",
cacheGroups: {
vendors: false,
default: false
}
}
}
- 打包生成的文件不再用vendors前缀
splitChunks默认配置项
optimization: {
// splitChunks: {},
// 等价于
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
chunks配置
-
默认为async
// 代码分割时只对异步代码生效，同步 import lodash 不进行代码分割 chunks: 'async'- 避免受其他因素干扰我们将cacheGroups都先置为false,minSize 和 maxSize 都设置为0
splitChunks: { chunks: 'async', minSize: 0, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { // vendors: { // test: /[\\/]node_modules[\\/]/, // priority: -10, // filename: "vendors.js" // }, // default: { // // minChunks: 2, // priority: -20, // reuseExistingChunk: true, // filename: "common.js" // } vendors: false, default: false } }- 修改index.js为同步import方式
import _ from 'lodash' var element = document.createElement('div') element.innerHTML =_.join(['a','b','c'],'***') document.body.appendChild(element)- 打包不会进行代码分割
- 修改index.js为异步import方式
function getComponent() { return import(/* webpackChunkName:'lodash' */'lodash').then(( _ ) => { var element = document.createElement('div') element.innerHTML =_.join(['a','b','c'],'***') return element }) } getComponent().then(element => document.body.appendChild(element))- 打包时会进行代码分割
-
对同步异步都进行打包 (initial为对同步代码做分割)
chunks: 'all'- 需要配合cacheGroups选项,否则同步import 仍旧不会进行代码分割
cacheGroups: { vendors: { // node_modules里面的文件分割打到单独文件里 test: /[\\/]node_modules[\\/]/, priority: -10 }, default: false }- 打包后代码被分割，
vendors~main表示打包了vendors文件，入口是main
- 可以修改vendors文件的文件名
vendors: { test: /[\\/]node_modules[\\/]/, priority: -10, // 文件名为vendors.js(异步import不可用) filename: "vendors.js" },- 打包后文件名为vendors.js
-
非node_module库的import
- 新建a.js
export default { num : 1 }- index.js导入a.js
import a from './a' console.log(a.num)- 符合代码分割后会走到cacheGroups，因为不在node_modules里，所以不会走vendros，而是走到default配置，因此我们需要修改cacheGroups
cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10, filename: "vendors.js" }, default: { priority: -20, reuseExistingChunk: true, } }- 打包后a.js会被打包到default~main.js中
- default设置filename
default: { priority: -20, reuseExistingChunk: true, filename: "common.js" }
minSize 配置
- 默认引入的模块大于30000个字节才做split
minSize: 30000
- 上例中引入a.js，设置minSize后打包，就不会进行代码分割
- 将minSize改为
minSize: 1后打包会进行代码分割，生成common.js文件
maxSize 配置
- 配置maxSize,限定最大值，超过就会进行二次拆分
// 引入的模块大于1个字节才做split
minSize: 1,
// 引入的a.js限定了最大值，超过就会对文件进行二次拆分
maxSize: 2,
- 打包后commin.js被二次拆分
- 一般不使用
minChunks
- minChunks表示一个代码至少被引用过多少次才进行代码分割
- 修改minChunks的值
minChunks: 2
index.js引用lodash
打包的代码不会进行代码分割
- 新建other.js，在改文件中也引用lodash
- webpack.common.js中对other.js也进行打包操作
entry: {
main: './src/index.js',
other: './src/other.js'
}
- 此时lodash会被分割出来，vendorsmainother表示main和other都引用了该文件
多个文件
- main.js引入了lodash,other.js引入了lodash和jquery, a.js引入了jquery,这个时候如果cacheGroups还设定fileName会发生冲突
- 将filename改为name,lodash和jquery都打到了vendors.js文件中
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
name: "vendors"
}
- 注释掉name,会分割为
vendors~a~other.js和vendors~main~other.js
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
//name: "vendors"
}
其他配置
- 其他配置
// 同时加载的模块数最多5个，超过5个不做代码分割
maxAsyncRequests: 5,
// 入口文件引入的文件最多三个代码分割
maxInitialRequests: 3,
// 生成文件名称连接符
automaticNameDelimiter: '~',
// cacheGroups 里 filename 有效
name: true,
- cacheGroups的配置
default: {
// minChunks: 2,
// 优先级低于-10，所以node_modules里面用vendors
priority: -20,
// 一个模块已经被引用过，就直接复用，不用再打包
reuseExistingChunk: true,
filename: "common.js"
},
