高级 - CodeSplit代码分割

// 多入口
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// entry: './src/main.js' // 只有一个入口文件, 单入口entry: {// 多入口文件, 对应多输出app: './src/app.js',main: './src/main.js',// ...},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js', // webpack命名方式, [name]以文件名自己命名},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, 'public/index.html')})],mode: 'development'
}

// 多入口提取公共模块
// 案例: 多入口文件有公共模块的代码被引用了, 此时不复用直接打包性能差, 因此需要进行处理const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {// entry: './src/main.js' // 只有一个入口文件, 单入口entry: {// 多入口文件, 对应多输出app: "./src/app.js",main: "./src/main.js",// ...},output: {path: path.resolve(__dirname, "dist"),filename: "[name].js", // webpack命名方式, [name]以文件名自己命名},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, "public/index.html"),}),],// 所有涉及到压缩和优化都放在这里optimization: {// 代码分割配置splitChunk: {chunks: "all", // 对所有模块都进行分割// 以下是默认值// minSize: 20000, // 分割代码最小的大小// minRemainingSize: 0, // 类似于minSize, 最后确保提取的文件大小不能为0// minChunks: 1, // 至少被引用的次数, 满足条件才会代码分割// maxAsyncRequests: 30, // 按需加载时并行加载的文件的最大数量// maxInitialRequests: 30, // 入口js文件最大并行请求数量// enforceSizeThreshold: 50000, // 超过50kb一定会单独打包(此时会忽略minRemainingSize, maxAsyncRequests, maxInitialRequests)// cacheGroups: { // 组, 哪些模块要打包到一个组//     defaultVendors: { // 组名//         test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块//         priority: -10, // 权重, 越大越高//         reuseExistingChunk: true, // 如果当前chunk包含已从主bundle中拆分出的模块, 则它将被重用, 而不是生成新的模块//     },//     default: {//         // 其他没有写的配置会使用上面的默认值//         minSize: 0, // 我们定义的文件体积太小了, 所以要改打包的最小文件体积//         minChunks: 2,//         priority: -20,//         reuseExistingChunk: true//     },// },// 修改配置, 真正开发时使用到defaultVendors其实就足够了, 这里是因为要验证体积太小, 所以自己定义了个minSize为0cacheGroups: {// 组, 哪些模块要打包到一个组// defaultVendors: {//     test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块//     priority: -10, // 权重, 越大越高//     reuseExistingChunk: true, // 如果当前chunk包含已从主bundle中拆分出的模块, 则它将被重用, 而不是生成新的模块// },default: {// 其他没有写的配置会使用上面的默认值minSize: 0, // 我们定义的文件体积太小了, 所以要改打包的最小文件体积minChunks: 2,priority: -20,reuseExistingChunk: true,},},},},mode: "development",
};

// 多入口按需加载(含单页面入口, 位置在optimization.splitChunk.chunks下有备注)
// 案例: 比如某个页面有个点击事件, 如果不处理, 打包的时候也会自动加载改事件, 但实际上应该按钮点击了之后才需要加载// 动态加载用法: import('./count').then(res => res.default(1, 2)).catch(err => console.log(err)) // res.default是count.js的函数const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {// entry: './src/main.js' // 只有一个入口文件, 单入口entry: {// 多入口文件, 对应多输出app: "./src/app.js",main: "./src/main.js",// ...},output: {path: path.resolve(__dirname, "dist"),filename: "[name].js", // webpack命名方式, [name]以文件名自己命名},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, "public/index.html"),}),],// 所有涉及到压缩和优化都放在这里optimization: {// 代码分割配置splitChunk: {// 单页面应用只需要配置这个chunks: "all"就可以了, 因为defaultVendors是默认配置, 而default的minChunks最小值为2永远进入不了所以不需要配置chunks: "all", // 对所有模块都进行分割// 以下是默认值// minSize: 20000, // 分割代码最小的大小// minRemainingSize: 0, // 类似于minSize, 最后确保提取的文件大小不能为0// minChunks: 1, // 至少被引用的次数, 满足条件才会代码分割// maxAsyncRequests: 30, // 按需加载时并行加载的文件的最大数量// maxInitialRequests: 30, // 入口js文件最大并行请求数量// enforceSizeThreshold: 50000, // 超过50kb一定会单独打包(此时会忽略minRemainingSize, maxAsyncRequests, maxInitialRequests)// cacheGroups: { // 组, 哪些模块要打包到一个组//     defaultVendors: { // 组名//         test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块//         priority: -10, // 权重, 越大越高//         reuseExistingChunk: true, // 如果当前chunk包含已从主bundle中拆分出的模块, 则它将被重用, 而不是生成新的模块//     },//     default: {//         // 其他没有写的配置会使用上面的默认值//         minSize: 0, // 我们定义的文件体积太小了, 所以要改打包的最小文件体积//         minChunks: 2,//         priority: -20,//         reuseExistingChunk: true//     },// },// 修改配置, 真正开发时使用到defaultVendors其实就足够了, 这里是因为要验证体积太小, 所以自己定义了个minSize为0cacheGroups: {// 组, 哪些模块要打包到一个组// defaultVendors: {//     test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块//     priority: -10, // 权重, 越大越高//     reuseExistingChunk: true, // 如果当前chunk包含已从主bundle中拆分出的模块, 则它将被重用, 而不是生成新的模块// },default: {// 其他没有写的配置会使用上面的默认值minSize: 0, // 我们定义的文件体积太小了, 所以要改打包的最小文件体积minChunks: 2,priority: -20,reuseExistingChunk: true,},},},},mode: "development",
};

// 给模块命名后在输出output使用const onClick = () => {// eslint不能识别动态导入需要, 需要额外追加配置, 在.eslintrc.js// 命名规则: /* webpackChunkName: "math" */    webpack魔法命名import("/* webpackChunkName: "math" */ ./js.math").then(() => {}).catch(() => {})
}output: {chunkFilename: "static/js/[name].js"
}// 统一命名output: {// 图片,字体等通过type:asset处理资源命名方式(指的是module模块内的对象type的值包含asset)assetModuleFilename: "static/media/[hash:10][ext][query]",// chunk模块chunkFilename: "static/js/[name].chunk.js",
}plugins: [{new MiniCssExtractPlugin({filename: "static/css/[name].css",chunkFilename: "static/css/[name].css",})
}]