1、没有懒加载

1、准备

export function mul(x, y) {
  return x * y;
}
export function count(x, y) {
  return x - y;
}
console.log("test被加载")

import {mul} from './test'
console.log(mul(2,3))
function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}
console.log("index被加载")
// eslint-disable-next-line
console.log(sum(1, 2, 3, 4));

2、webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry:'./src/js/index.js',
  output: {
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  mode: 'production'
};

3、结果

2、懒加载

1、准备

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}
/*
  通过js代码，让某个文件被单独打包成一个chunk
  import动态导入语法：能将某个文件单独打包
*/
import('./test')
  .then(({ mul, count }) => {
    // 文件加载成功~
    // eslint-disable-next-line
    console.log(mul(2, 5));
  })
  .catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败~');
  });
// eslint-disable-next-line
console.log(sum(1, 2, 3, 4));

2、结果

1、没有固定文件名

test.js打包，未命名则根据ID命名

2、固定文件名

/ webpackChunkName:’test’ / 固定文件名

结果：

3、预加载

1、准备

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}
/*
  通过js代码，让某个文件被单独打包成一个chunk
  import动态导入语法：能将某个文件单独打包
*/
import(/* webpackChunkName: 'test',webpackPrefetch: true */'./test')
  .then(({ mul, count }) => {
    // 文件加载成功~
    // eslint-disable-next-line
    console.log(mul(2, 5));
  })
  .catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败~');
  });
// eslint-disable-next-line
console.log(sum(1, 2, 3, 4));

2、结果