webpack生产环境优化：code split
转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack生产环境优化：code split
code split代码分割，既将打包后的js分割成多份js文件，
方便后期实现“并行加载”、“按需加载”等，提高性能。
一、核心配置
建议使用方式二的单入口模式，并按需使用方式三。
1.1、方式一：根据入口文件进行代码分割
/*
webpack.config.js webpack的配置文件
路径： ./webpack.config.js
*/
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack配置
// 入口起点文件
// 单入口
// entry: './src/js/index.js',
entry: {
// 多入口：有一个入口，最终输出就有一个bundle,多入口就有多个bundle，每个bundle会打包成一个js文件。
main:'./src/js/index.js',
test:'./src/js/test.js',
},
// 输出
output: {
// 输出文件名
filename: 'js/[name].[contenthash:10].js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
},
// plugins的配置
plugins: [
// 详细的plugins配置
// html-webpack-plugin
// 功能:默认会创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
// 需求:需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
template: './src/index.html',
//压缩 html 代码
minify: {
//移除空格
collapseWhitespace: true,
//移除注释
removeComments: true
}
}),
],
// 模式 development 开发环境，production 生产环境
// mode: 'development',
// 生产环境下会自动压缩js代码
mode: 'production',
};
核心配置
/*
webpack.config.js webpack的配置文件
路径： ./webpack.config.js
*/
……
entry: {
// 多入口：有一个入口，最终输出就有一个bundle,多入口就有多个bundle，每个bundle会打包成一个js文件。
main:'./src/js/index.js',
test:'./src/js/test.js',
},
// 输出
output: {
// 输出文件名
filename: 'js/[name].[contenthash:10].js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
},
……
问题：不够灵活，需要为每一个想要分割的js文件进行配置。
1.2、方式二：配置optimization
/*
webpack.config.js webpack的配置文件
路径： ./webpack.config.js
*/
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack配置
// 入口起点文件
// 单入口
// entry: './src/js/index.js',
entry: {
// 多入口：有一个入口，最终输出就有一个bundle,多入口就有多个bundle，每个bundle会打包成一个js文件。
main:'./src/js/index.js',
test:'./src/js/test.js',
},
// 输出
output: {
// 输出文件名
filename: 'js/[name].[contenthash:10].js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
},
// plugins的配置
plugins: [
// 详细的plugins配置
// html-webpack-plugin
// 功能:默认会创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
// 需求:需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
template: './src/index.html',
//压缩 html 代码
minify: {
//移除空格
collapseWhitespace: true,
//移除注释
removeComments: true
}
}),
],
/*
可以将node_modules中代码单独打包成一个chunk最终输出。
自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk。
*/
optimization: {
splitChunks: {
chunks: 'all'
}
}
// 模式 development 开发环境，production 生产环境
// mode: 'development',
// 生产环境下会自动压缩js代码
mode: 'production',
};
核心配置
……
// 单入口
// entry: './src/js/index.js',
entry: {
// 多入口：有一个入口，最终输出就有一个bundle,多入口就有多个bundle，每个bundle会打包成一个js文件。
main:'./src/js/index.js',
test:'./src/js/test.js',
},
……
/*
可以将node_modules中代码单独打包成一个chunk最终输出。
自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk。
*/
optimization: {
splitChunks: {
chunks: 'all'
}
}
……
- 单入口下，可以将node_modules中代码单独打包成一个chunk最终输出。
- 多入口下相比于单入口，更是能自动分析多入口chunk中有没有公共的文件。如果有会打包成单独一个chunk。
1.3、方式三：import动态导入
//入口文件
// ./src/index.js
import('./test')
.then(({mul,count}) => {
//文件加载成功~
// eslint-disable-next-line
console.log(mul(2,5));
})
.catch(() => {
//文件加载失败~
// eslint-disable-next-line
console.log('文件加载失败~');
});
核心配置
import('./xxx/xxx')
.then(({mul,count}) => {
//文件加载成功时执行。
……
})
.catch(() => {
//文件加载失败时执行。
……
});
通过js代码,让某个文件被单独打包成一个chunk。
import动态导入语法：能将某个文件单独打包。
1.3.1、自定义打包的文件名
//入口文件
// 在import中加入配置信息：/* webpackChunkName: 'test' */
// 用webpackChunkName指定chunk名称。
import(/* webpackChunkName: 'test' */'./test')
.then(({mul,count}) => {
//文件加载成功~
// eslint-disable-next-line
console.log(mul(2,5));
})
.catch(() => {
//文件加载失败~
// eslint-disable-next-line
console.log('文件加载失败~');
});
四、工程文件目录
# 目录结构
.
├── src
│ ├── index.html
│ └── js
│ ├── index.js
│ └── test.js //希望被独立打包的文件
└── webpack.config.js
