前端性能优化----代码分割

一、序言

在现代前端开发中，优化应用性能是一个至关重要的任务。当然前端性能优化有很多种方式，其中一种方式就是代码分割。

二、什么是代码分割？

代码分割（Code Splitting）是一种将代码拆分成多个小包的技术，以便按需加载。这样可以避免一次性加载所有代码，从而提高页面初始加载速度和响应速度。

三、实现代码分割

1.懒加载实现代码分割：

// react
const Home = React.Lazy(() => import('./pages/home'));
// 然后在路由中去使用引入的该Home组件

// vue
const Home = () => import('./pages/home.vue');
// 然后在路由中去使用引入的该Home组件

2.动态导入实现代码分割：

// 动态导入允许你在运行时按需加载代码。这通常通过使用import()来实现。
document.getElementById('load-import').addEventListener('click', async () => {
  const TestModule = await import('./test-module.js');
  TestModule.run();
});

3.webpack实现代码分割：splitChunks配置代码分割非常灵活，可以配置很多的东西，这里只是简单介绍有这样一种方法可以做代码分割。

// 入口点做分割：通过配置多个入口点，可以将代码分割成多个独立的包，每个入口点对应一个或多个输出文件。
// webpack.config.js
module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

// SplitChunksPlugin做分割：
// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};