开门见山
在本篇文章中主要是介绍webpack如何进行打包优化,在webpack中默认将所有的文件都打包到bundle.js文件中
但是在项目运行的时候并不是所有的模块都需要使用的,如果一次性加载全部的文件,容易浪费带宽和流量
所以呢在这里我们要把模块打包成不同js文件,实现更好的体验,主要是代码分割,
有两种实现方式,一种是多入口打包,另外一种是动态导入
具体如何实现,请看下面的演示
多入口打包
一般适用于多页应用打包,一个页面对应一个打包入口,具体看代码实现
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'none',
entry: {
index: "./src/index.js", //指定入口文件
album: "./src/album.js" //指定入口文件
},
output: {
filename: '[name].bundle.js' //两个入口文件也就意味着有两个输出文件,
//这里我们用[name]作为占位符使用
//打包的时候自动替换为入口的文件名称也就是index和album
},
module: {
rules: [{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Multi Entry',
template: './src/index.html',
filename: 'index.html',
chunks: ['index'] //引入指定的输出的js文件
}),
new HtmlWebpackPlugin({
title: 'Multi Entry',
template: './src/album.html',
filename: 'album.html',
chunks: ['album'] //引入指定的输出的js文件
})
]
}
多入口打包提供公共模块
多入口打包提供公共模块其实非常简单,只需要在webpack.config.js开启一个简单的配置
optimization: {
splitChunks: {
chunks: "all"
}
},
这样就实现了提取公共模块,很简单
动态导入
按需加载一般指的是数据中的按需加载,在webpack中具体指的是,需要用到某个模块时,在加载这个模块
可以节省带宽和流量,webpack支持动态导入的方式实现按需加载,而且动态导入的模块自动提取到单独的bundle中
从而实现分包,这种方式更为灵活,我们可以通过代码的逻辑判断需不需要引用模块,
动态导入代码演示
const render = () => {
const hash = window.location.hash || '#posts'
const mainElement = document.querySelector('.main')
mainElement.innerHTML = ''
if (hash === '#posts') {
//逻辑判断,是否为posts,如果是posts就引入posts,支持链式调用,通过解构拿到数据
/* webpackChunkName: 'components' */ 这部分是魔法注释,主要是改写输出文件的文件名
import ( /* webpackChunkName: 'components' */ './posts/posts').then(({ default: posts }) => {
mainElement.appendChild(posts())
})
} else if (hash === '#album') {
//如果webpackChunkName的名字是相同的,那么这两个文件会合并到一起
import ( /* webpackChunkName: 'components' */ './album/album').then(({ default: album }) => {
mainElement.appendChild(album())
})
}
}
render()
window.addEventListener('hashchange', render)
莫等闲,白了少年头,空悲切,谢谢观看,如有不足,敬请指教