bundle体积过大
并不是每个模块在启动时都是必要的
分包、按需加载

多入口打包，适用于多页面程序，公共部分单独提取

  1. const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将css文件提取到单独的文件中
  2. const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') // 将css文件压缩
  3. const TerserWebpackPlugin = require('terser-webpack-plugin') // 将js文件压缩
  4. module.exports = {
  5.     entry: {
  6.       main: './src/main.js',
  7.     login: './src/login.js'
  8.   },
  9.   output: {
  10.       filename: '[name]-[chunkhash:8].bundle.js' // 有三种值可选：hash, chunkhash, contenthash，一般选取chunkhash
  11.   },
  12.   module: {
  13.       rules: [
  14.       {
  15.           test: /\.css$/,
  16.         use: [
  17.             MiniCssExtractPlugin.loader, // 当我们使用MiniCssExtractPlugin，就不需要使用style-loader了，
  18.           'css-loader' // MiniCssExtractPlugin.loader会帮助我们将样式文件通过link标签的形式引入
  19.         ]
  20.       }
  21.     ]
  22.   },
  23.   optimization: { // 开启优化项
  24.       splitChunks: {
  25.         chunks: 'all' // 将所有的公共模块提取到一个单独的文件中
  26.     },
  27.     minimizer: [ // 自定义压缩插件，webpack建议我们将压缩插件都放在这个数组中
  28.       new OptimizeCssAssetsWebpackPlugin(),
  29.       new TerserWebpackPlugin()
  30.     ]
  31.   },
  32.   plugins: [
  33.     new MiniCssExtractPlugin({
  34.         filename: '[name]-[chunkhash:8].bundle.css'
  35.     }),
  36.       new HtmlWebpackPlugin({
  37.         title: 'multiple entry',
  38.       template: 'index.html',
  39.       filename: 'index.html',
  40.       chunks: ['main'] // 输出的index.html文件中，script标签中加载的chunk
  41.     }),
  42.     new HtmlWebpackPlugin({
  43.         title: 'multiple entry',
  44.       template: 'login.html',
  45.       filename: 'login.html',
  46.       chunks: ['login'] // 输出的index.html文件中，script标签中加载的chunk
  47.     })
  48.   ]
  49. }

webpack动态导入，按需加载，可以帮助我们降低流量和带宽

  1. // 在React 或 Vue中，我们可以在路由文件中使用import按需导入组件
  3. // 下面的示例是在单个文件中使用动态导入，且使用了魔法注释，注意魔法注释的格式
  4. // 如果我们想将某几个模块打包到一起，那么只需要将webpackChunkName命名一致就可以了
  5. import (/* webpackChunkName: 'mian' */'./src/index.js').then(({ default: 'main'}) => {
  7. })