全面进入抗疫时间,写篇博客压压惊
- webpack的代码分割
我们要解决的问题是把不同入口之间的共同的模块抽离出来分离到公共的模块中1234567891011121314151617181920212223242526272829303132333435363738394041424344454647//a.jsrequire('./c.js');const $ = require('jquery')function fn() {console.log('a-------');}module.exports = fn();//b.jsrequire('./c.js');const $ = require('jquery')function fn() {console.log('b-------');}module.exports = fn();//c.jsfunction fn() {console.log('c-------');}module.exports = fn();const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: {index: './src/index.js',a: './src/a.js'},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js',// 动态加载的打包在这里chunkFilename: '[name].bundle.js',},plugins: [new HtmlWebpackPlugin({template: './public/index.html',filename: 'index.html'}),new HtmlWebpackPlugin({template: './public/a.html',filename: 'a.html'})]}
这种情况下 从和jquery被打包了2次,增加了打包后的文件体积
使用splitChunks进行文件拆分
1234567891011121314151617181920212223242526//webpack.config.jsoptimization: {splitChunks: {minSize: 30, //提取出的chunk的最小大小cacheGroups: {default: {name: 'common',chunks: 'initial',minChunks: 2, //模块被引用2次以上的才抽离priority: -20},vendors: { //拆分第三方库(通过npm|yarn安装的库)test: /[\\/]node_modules[\\/]/,name: 'vendor',chunks: 'initial',priority: -10},locallib: { //拆分指定文件test: /(src\/locallib\.js)$/,name: 'locallib',chunks: 'initial',priority: -9}}}}注意只有抽离后的文件体积大于30 才会打包到chunk里面去, priority指定优先级
使用lazyload进行按需加载
12345678910111213141516171819import { showAlert } from "./notLazyLoad";window.onload = () => {const alertBtn = document.querySelector("#alert");const lazyAlertBtn = document.querySelector("#lazyAlert");alertBtn.addEventListener("click", () => {showAlert();});// 使用dynamic import实现按需加载lazyAlertBtn.addEventListener("click", () => {import(/* webpackChunkName: "lazyLoaded" */"./lazyLoad").then(module => {module.showLazyAlert();});});};
好,今天就到这里